这是网页头,清理一些默认样式~
*{
margin: 0;
padding: 0;
font-family: '微软雅黑';
}
划过导航头变黑:
<div class="nav">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">GALLERY</a>
<a href="#">FACULTY</a>
<a href="#">EVENTS</a>
<a href="#">CONTACT</a>
</div>
.nav a{
display: inline-block;/*设置整块划过变黑的关键~*/
text-decoration: none;
color: white;
height: 100px;
line-height: 100px;
margin-left: 30px;
padding-left: 15px;
padding-right: 15px;
}
背景上设置遮罩层使用z-index 注意配合absolute relative使用
<div class="pic_banner">
<img src="img/banner3.jpg">
</div>
<!--遮罩层-->
<div class="toplayer"></div>
<div class="form_">
<form>
<input type="text" name="name" placeholder="your Name" class="input_sty"><br>
<input type="text" name="phone" placeholder="your Phone" class="input_sty"><br>
<input type="text" name="email" placeholder="your Email" class="input_sty"><br>
<input type="textare" name="text" placeholder="Write Your Comment Here" class="text_sty"><br>
<input type="button" name="send" value="SEND MESSAGE" class="button_sty">
</form>
</div>
</div>
<!--表单在最上层,背景在最底层 遮罩层在中间-->
img{
width: 100%;
height: 600px;
}<!--背景图-->
.banner .toplayer{
position: absolute;
width: 100%;
height: 600px;
top: 100px;
left: 0;
background-color: #000;
opacity: 0.5;
}
.banner .form_{
width: 500px;
height: 300px;
position: absolute;
top: 400px;
margin-top: -150px;
z-index: 4;
left: 50%;
margin-left: -250px;
text-align: center;
}
<!--在上层的z-index要大(数值任意)-->
输入框显示背景图(透明)主要是设置transparent属性
.banner .input_sty{
margin-top: 20px;
background-color: transparent;
width: 380px;
height: 35px;
border: #c0c0c0 1px solid;
}
使用float布局会比position布局有时候代码简洁很多~(在这里以一个充满页面,一行4小块的图文间隔块为例子,总共8个小盒子)下面是html结构:
<div class="ab_bottom">
<div class="b_img1 sj">
<img src="img/b1.jpg">
</div>
<div class="b_w">
<h2>Library</h2>
<div class="b_w11">
Lorem Jpsum dummy text of the<br>
printing and typesetting industry.
</div>
<div class="b_w12">
Lorem Lpsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a gallyey of type and scrambled it to make a type speciment babe.
</div>
<button>EXPLORE</button>
</div>
<div class="b_img1 sj">
<img src="img/b2.jpg">
</div>
<div class="b_w">
<h2>Library</h2>
<div class="b_w11">
Lorem Jpsum dummy text of the<br>
printing and typesetting industry.
</div>
<div class="b_w12">
Lorem Lpsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a gallyey of type and scrambled it to make a type speciment babe.
</div>
<button>EXPLORE</button>
</div>
<div class="b_w">
<h2>Library</h2>
<div class="b_w11">
Lorem Jpsum dummy text of the<br>
printing and typesetting industry.
</div>
<div class="b_w12">
Lorem Lpsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a gallyey of type and scrambled it to make a type speciment babe.
</div>
<button>EXPLORE</button>
</div>
<div class="b_img1 sj">
<img src="img/b3.jpg">
</div>
<div class="b_w">
<h2>Library</h2>
<div class="b_w11">
Lorem Jpsum dummy text of the<br>
printing and typesetting industry.
</div>
<div class="b_w12">
Lorem Lpsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknow printer took<br>
a gallyey of type and scrambled it to make a type speciment babe.
</div>
<button>EXPLORE</button>
</div>
<div class="b_img1 sj">
<img src="img/b4.jpg">
</div>
</div>
上面布局没有分上下图片层,而是8个小盒子 在后续使用float:left让8个小盒子平均分摊在页面(!!!这样比absolute布局要简洁很多~)
这里还有一个小问题,在给图片的容器盒子设置了宽高的情况下,设置img的属性100%可以使得图片填满div盒子,在缩放页面的时候,图片始终是布满盒子的(这是图片默认情况下小于容器盒子出现的问题)
(总100% 每个DIV小块 25% )
下面是css样式:
ab_bottom{
width: 100%;
position: relative;
overflow: hidden;
top: 90px;
}
.ab_bottom>div{/*对于.ab_bottom下面所有的div子元素,但不包括子孙元素div*/
width: 25%;
height: 400px;
float: left;
}
.ab_bottom img{
width: 100%;/*不去设置的时候图片会溢出和字体重叠*/
height: 400px;
position: relative;
}
.ab_bottom .b_w{
background-color: #07cbc9;
}
.ab_bottom .b_w h2{
margin-top: 30px;
margin-left: 30px;
margin-bottom: 30px;
}
.ab_bottom .b_w .b_w11{
margin-left: 30px;
margin-bottom: 30px;
}
.ab_bottom .b_w .b_w12{
margin-left: 30px;
margin-bottom: 30px;
font-weight: lighter;
}
第二种常见布局:
在这里选择float布局仍然是最省事的全部统一设置float left省去了各自设置absolute relative的代码量~总体设置一个宽度1200 px 使用margin:0 auto使得这个板块居中~ 设置6个idv盒子的宽高(去配合1200px)使得使用float后刚好3个在上 3个在下(300Px左右最为合适)嘿嘿,补充一点float以后的当然要清除浮动,嘻嘻
下面是图片的html布局
<div class="gbot">
<div class="box">
<div class="p">
<img src="img/03-01.jpg">
</div>
<div class="w">
SCIENCE LAB
</div>
</div>
<div class="box">
<div class="p">
<img src="img/03-02.jpg">
</div>
<div class="w">
INDOOR STADIUM
</div>
</div>
<div class="box">
<div class="p">
<img src="img/03-03.jpg">
</div>
<div class="w">
TEANSPORTTATION
</div>
</div>
<div class="box">
<div class="p">
<img src="img/03-04.jpg">
</div>
<div class="w">
KIDS ROOM
</div>
</div>
<div class="box">
<div class="p">
<img src="img/03-05.jpg">
</div>
<div class="w">
MEDITON CLASSES
</div>
</div>
<div class="box">
<div class="p">
<img src="img/03-06.jpg">
</div>
<div class="w">
MEDITON CLASSES
</div>
</div>
</div>
以下是图片的css样式
.gallery .gbot>div{
width: 350px;
}
.gallery .gbot .box{
height: 280px;
float: left;
margin: 20px 10px;
margin-left: 28px;
}
.gallery .gbot .box .p{
height: 250px;
}
.gallery img{
width: 100%;
height: 100%;
}
.gallery .gbot .box .w{
width: 340px;
height: 40px;
background-color: black;
color: white;
padding-left: 10px;
}
设置一条小的短线条:
html
<div class="g_line"></div>
css
.gallery .g_line{
border-bottom: 2px solid #07cbc9;
width: 40px;
margin: 20px auto;
}
margin:20px auto;
在这里既设置了上下距离 也使得线条水平居中~