w3c网站案例
w3c网站
reset操作
body {background-color: #eee;
}
html, body, h1, h2, h3, h4, h5, h6, ul, p {margin: 0;
}ul {padding: 0;list-style: none;
}a {color: black;text-decoration: none;
}input, img, button {vertical-align: top;
}header头部
css
.header {width: 1210px;height: 100px;background-color: #fdfcf8;/*自动获取留白区域*//*margin-left: auto;*//*margin-right: auto;*/margin: 0 auto;
}
.header:after {content: '';display: block;clear: both;
}
#site-title a {display: block;width: 500px;height: 100px;background-color: red;float: left;/*背景图片的整体设置*/background: url("../img/bg.png") no-repeat 0 -150px;
}
#site-title a:hover {background-position-y: -250px;
}
.header-form {/*background-color: pink;*/float: right;/*父子级顶端产生距离，建议使用padding*/padding-top: 30px;
}
.header-form input {/*margin-right: 20px;*/width: 260px;height: 30px;border: 1px solid #ccc;font-size: 17px;vertical-align: top;
}
.header-search-btn {width: 33px;height: 33px;border: none;background-color: #AE4141;outline: none;color: white;margin-right: 30px;vertical-align: top;cursor: pointer;
}html
nav导航栏
css
.nav {width: 1210px;/*height: 48px;*/margin: 0 auto;background: url("../img/bg.png") no-repeat 0 0;
}
.nav:after {content: '';display: block;clear: both;
}.nav-li {float: left;
}
.nav-a {display: block;height: 48px;background-image: url("../img/bg.png");
}
.nav-a:hover {/*y轴偏移是共性*/background-position-y: -48px;
}
.nav-a1 {width: 155px;
}
.nav-a2 {width: 157px;background-position-x: -155px;
}
.nav-a3 {width: 167px;background-position-x: calc(-155px - 157px);
}
.nav-a4 {width: 158px;background-position-x: calc(-155px - 157px - 167px);
}
.nav-a5 {width: 101px;background-position-x: calc(-155px - 157px - 167px - 158px);
}
.nav-a6 {width: 185px;background-position-x: calc(-155px - 157px - 167px - 158px - 101px);
}
.nav-a7 {width: 177px;background-position-x: calc(-155px - 157px - 167px - 158px - 101px - 185px);
}html
main主体
css
.main {width: 1210px;margin: 0 auto;background-color: white;
}
.main:after {content: '';display: block;clear: both;
}
.main > div {float: left;
}
.main-left, .main-right, .main-center {float: left;/*跟三者中的最大者*/height: 1225px;
}.main-left, .main-right {width: 178px;/*background-color: orange;*/border-left: 1px solid #ccc;border-right: 1px solid #ccc;padding-top: 10px;padding-bottom: 20px;
}
.main-center {width: 850px;/*background-color: red;*//*height: 500px;*/
}.main-col h3 {font: bold 15px/30px 'Arial';/*background-color: pink;*/padding-left: 10px;margin-top: 5px;
}
.main-col a {display: block;font: normal 14px/26px '微软雅黑';padding-left: 15px;
}
.main-left .main-col a:hover {background-color: #ccc;color: white;
}
.main-left .main-col a:active {background-color: #BD2D30;
}.main-right .main-col a {color: #BD2D30;
}
.main-right .main-col a:hover {background-color: #BD2D30;color: white;
}.main-col-title {padding: 10px 0 0 10px;
}
.main-col-title a {font-size: 14px;color: #0479A7;/*下划线一定和文本紧挨*//*text-decoration: underline;*//*下边框也可以完成下划线的效果，且可以通过padding-bottom完成距离*//*border-bottom: 1px solid #0479A7;*/
}
.main-col-title a:hover {/*下边框也可以完成下划线的效果，且可以通过padding-bottom完成距离*/border-bottom: 1px solid #0479A7;
}.main-center {padding: 0 15px;width: 820px;
}.main-box {/*height: 200px;*//*background-color: orange;*/border-bottom: 1px solid #aaa;
}
.main-box:last-of-type {border-bottom: none;
}
.main-box1 {text-align: center;padding: 60px 0 30px;
}
.main-box1 h2 {line-height: 45px;
}
.main-box1 p {line-height: 35px;font-size: 17px;font-weight: 400;
}.main-xbox {padding: 30px 0 30px 120px;
}
.main-xbox h3 {line-height: 40px;
}
.main-xbox p {line-height: 30px;
}
.main-box2 {background: url("../img/icon2.png") no-repeat 0 20px;
}
.main-box3 {background: url("../img/icon3.png") no-repeat 0 20px;
}
.main-box4 {background: url("../img/icon4.png") no-repeat 0 20px;
}
.main-box5 {background: url("../img/icon5.png") no-repeat 0 20px;
}
.main-box5 a {color: #AE4141;border-bottom: 1px solid #BD2D30;
}
.main-box5 a:hover {color: red;border-bottom: 1px solid red;
}
.main-box8 {background: url("../img/icon8.png") no-repeat 0 20px;padding-bottom: 50px;
}
.main-box8:after {content: '';display: block;clear: both;
}
.main-box8 p a {border-bottom: 1px solid #BD2D30;margin-right: 20px;
}
.main-box8 p a:hover {border-bottom: 1px solid red;
}.mark-ww {margin-top: 40px;
}
.weibo {padding: 25px 0 0 55px;width: 234px;height: 62px;float: left;background-image: url("../img/icon9.png");
}
/*.weibo h5 {*//*color: #888;*/
/*}*/
/*.weibo a {*//*font-size: 14px;*//*border-bottom: 1px solid #BD2D30;*/
/*}*/
/*.weibo a:hover {*//*font-size: 14px;*//*border-bottom: 1px solid red;*/
/*}*/.weixin {padding: 25px 0 0 55px;width: 242px;height: 62px;float: left;background-image: url("../img/icon10.png");margin-left: 60px;
}
.mark-ww h5 {color: #888;
}
.mark-ww a {font-size: 14px;border-bottom: 1px solid #BD2D30;
}
.mark-ww a:hover {font-size: 14px;border-bottom: 1px solid red;
}html
HTML 教程
HTML 教程
HTML 教程
关于 W3School
帮助 W3School
领先的 Web 技术教程 - 全部免费
在 W3School，你可以找到你所需要的所有的网站建设教程。
从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。
从左侧的菜单选择你需要的教程！
完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。
其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在线实例测试工具
在 W3School，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
从何入手？
什么是一个 Web 建设者需要学习的知识呢？
W3School 将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。
如果您是初学者，请您阅读《网站构建初级教程》。
如果您是开发者，请您阅读《网站构建高级教程》。
W3School 友情链接
Firefox 中文社区w3ctechWeTest腾讯质量开放平台
新浪微博
W3School 官方微博微信公众号
W3School 官方服务号参考手册
参考手册
参考手册
footer页脚
css
.footer {width: 1210px;margin: 0 auto;text-align: center;
}
.footer-d1 {padding-top: 14px;height: 32px;background-color: #777;background-image: url("../img/footer.png");
}
.footer-d1 p {font-size: 14px;color: #777;line-height: 24px;background: url("../img/alert.png") no-repeat 200px;text-indent: 30px;
}
.footer-d2 p {font-size: 15px;color: #777;line-height: 56px;text-indent: 30px;
}
.footer-d2 a {color: #777;
}
.footer-d2 a:hover {color: black;text-decoration: underline;
}
.footer-d2 .a5 {margin-left: 20px;
}html
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
使用条款和隐私条款。版权所有，保留一切权利。 赞助商：上海赢科投资有限公司。 蒙ICP备06004630号 广告刊例
多页面转跳
css/nav.css
.nav-a.active {background-position-y: -48px;
}主页修订
html/h.html
html/j.html
转载于:https://www.cnblogs.com/Hades123/p/11296187.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！