<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link href="css/index.css" rel="stylesheet"> </head> <body> <!--头部--> <div id="header"> <!--javascript:void(0)--> <a href="#">新闻</a> <a href="#">hao123</a> <a href="#">地图</a> <a href="#">视频</a> <a href="#">贴吧</a> <a href="#">登录</a> <a href="#">设置</a> <a href="#" class="more-product">更多产品</a> </div> <!--主要内容--> <div id="content"> <!--中间的logo图片--> <div class="logo"> <img src="images/logo_white_ee663702.png"> </div> <!--中间的搜索(搜索框和按钮)--> <div class="search"> <input type="text" value=""> <a href="#">百度一下</a> </div> <!--中间下面的图片--> <div class="dom"> <img src="images/d_1.png"> <img src="images/d_2.png"> <img src="images/d_3.png"> <img src="images/d_4.png"> </div> <!--中间下面的图片--> <div class="dom"> <img src="images/d_5.png"> <img src="images/d_6.png"> <img src="images/d_7.png"> <img src="images/d_8.png"> </div> </div> <!--尾部--> <div id="footer"> <p class="footer-top"> <a href="#">把百度设为主页</a> <a href="#">关于百度 </a> <a href="#">About Baidu</a> </p> <p class="footer-bottom"> ©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号 <img src="images/copy_rignt_24.png"> </p> </div> </body> </html>
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{ padding: 0; margin: 0; } /*全局设置a标签的颜色*/ a{ color: black; } body{ /*设置整个页面的字体大小都是13px*/ font-size: 13px; /*背景图片*/ background: url("../images/bg.jpg"); } /*头部*/ #header{ /*设置透明度*/ background-color: rgba(0, 0, 0, 0.2); text-align: right; /*外边距:上-右-下-左*/ margin: 0px 0px 30px 0; height: 38px; line-height: 38px; } #header a{ color: white; margin-right: 7px; font-size: 15px; font-weight: bolder; } /*特殊的样式,可以单独设置一个类特殊设置*/ #header a.more-product{ /*让行内标签---->行内-块级标签,就可以改变尺寸*/ display: inline-block; background-color: #3385ff; color: white; width: 80px; text-align: center; height: 28px; line-height: 28px; text-decoration: none; font-weight: normal; } /*主要内容*/ #content{ /*background-color: green;*/ } /*设置搜索框外部的div的宽度,可以让其水平居中*/ #content .search{ /*background-color: blue;*/ width: 600px; height: 33px; /*居中*/ margin: 0 auto; } #content .search input{ width: 500px; height: 33px; padding: 5px; /*让内边距向内,伸缩,会占用内容的尺寸*/ box-sizing: border-box; border: 1px solid #ddd; } /*伪类:获得焦点的时候调用*/ #content .search input:focus{ /*去除外边框*/ outline: none; border:1px solid #3385ff; } #content .search{ margin-bottom: 40px; } /*让a标签右浮动,只要设置了输入框的border之后,两个宽度加起来正好*/ #content .search a{ display: inline-block; background-color: #3385ff; color: white; width: 100px; text-align: center; height: 33px; /*设置垂直居中*/ line-height: 33px; /*去除下划线*/ text-decoration: none; font-weight: normal; float: right; } #content .logo{ text-align: center; } #content .logo img{ width: 270px; height: 129px; } #content .dom{ text-align: center; } #content .dom img{ width: 150px; margin: 5px; } #content .dom img:hover{ /*不透明度*/ opacity: 0.7; } /*尾部*/ #footer{ margin-top: 120px; /*background-color: yellow;*/ text-align: center; } #footer p{ margin-top: 10px; } #footer p a{ color: blue; } #footer p.footer-top a{ margin: 0 5px; }
