css如何让图中左边浅蓝色块与深蓝色块对齐,切浅蓝色块均匀分布

html-css021

css如何让图中左边浅蓝色块与深蓝色块对齐,切浅蓝色块均匀分布,第1张

可以这种思路,其实就是假设6x+5y=100%,然后最后一个浅蓝不要右边距

<div class="fa">

<p></p>

<div class="son">

<p></p>

<p></p>

<p></p>

<p></p>

<p></p>

<p class="last"></p>

</div>

</div> <style type="text/css"> 

.fa{width: 800pxheight: 800pxmargin-bottom: 20px}

.fa p{width: 100%height: 50pxbackground: #2b7fbf}

.fa .son{width: 100%height: 200px}

.son p{width: 15%height: 200pxbackground: #b1cae6float: leftmargin-right: 2%}

.son p.last{margin-right: 0}

</style>

建立外部样式表很简单,就在html的head里写

<link rel="stylesheet" type="text/css" href="css文件路径">

至于你上边说的一大堆css里具体内容,建议你去w3school上学一下css,css很简单的,还是别指望别人给你写好了

#navmenu2{

width:150px

text-align:center

float:left

}

#navmenu2 ul{

padding:0px

margin:0px

list-style:none

}

#navmenu2 li{

margin:0px

}

#navmenu2 a{

display:block

text-decoration:none

width:120px

border:1px

border-right:10px

border-left:20px

border-color:#60C

border-style:solid

background-color:#00F

color:#FFF

padding:7px 0px 7px 0px

}

#navmenu2 a:hover {

background-color:#000

color:#09F

border-left-color:#09f

border-right-color:#09f

border-top-color:#60c

border-bottom-color:#60c

}