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
<div class="header">
<h1 id="site-title">
<a href="" title="w3c在线教学"></a>
</h1>
<form class="header-form" method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button title="搜索" class="header-search-btn" type="submit">Go</button>
</form>
</div>
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
<ul class="nav">
<li class="nav-li">
<a title="html/css教程" href="" class="nav-a nav-a1"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a2"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a3"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a4"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a5"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a6"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a7"></a>
</li>
</ul>
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
<div class="main">
<!--main 左边栏-->
<div class="main-left">
<div class="main-col">
<h3>HTML 教程</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>HTML 教程</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>HTML 教程</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<h4 class="main-col-title">
<a href="">关于 W3School</a>
</h4>
<h4 class="main-col-title">
<a href="">帮助 W3School</a>
</h4>
</div>
<!--main 中主体-->
<div class="main-center">
<div class="main-box main-box1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>从左侧的菜单选择你需要的教程！</b>
</p>
</div>
<div class="main-box main-xbox main-box2">
<h3>完整的网站技术参考手册</h3>
<p>我们的参考手册涵盖了网站技术的方方面面。</p>
<p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
</div>
<div class="main-box main-xbox main-box3">
<h3>在线实例测试工具</h3>
<p>在 W3School，我们提供上千个实例。</p>
<p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
</div>
<div class="main-box main-xbox main-box4">
<h3>快捷易懂的学习方式</h3>
<p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
<p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>
</div>
<div class="main-box main-xbox main-box5">
<h3>从何入手？</h3>
<p>什么是一个 Web 建设者需要学习的知识呢？</p>
<p>W3School 将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。</p>
<p>如果您是初学者，请您阅读《<a href="">网站构建初级教程</a>》。</p>
<p>如果您是开发者，请您阅读《<a href="">网站构建高级教程</a>》。</p>
</div>
<div class="main-box main-xbox main-box8">
<h3>W3School 友情链接</h3>
<p>
<a href="">Firefox 中文社区</a>
<a href="">w3ctech</a>
<a href="">WeTest腾讯质量开放平台</a>
</p>
<div class="mark-ww">
<div class="weibo">
<h5>新浪微博</h5>
<a href="">W3School 官方微博</a>
</div>
<div class="weixin">
<h5>微信公众号</h5>
<a href="">W3School 官方服务号</a>
</div>
</div>
</div>
</div>
<!--main 右边栏-->
<div class="main-right">
<div class="main-col">
<h3>参考手册</h3>
<ul>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>参考手册</h3>
<ul>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>参考手册</h3>
<ul>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
<li>
<a href="">html/html5标签</a>
</li>
</ul>
</div>
</div>
</div>
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
<div class="footer">
<div class="footer-d1">
<p>W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
</div>
<div class="footer-d2">
<p><a class="a1" href="">使用条款</a>和<a class="a2" href="">隐私条款</a>。版权所有，保留一切权利。 赞助商：<a class="a3" href="">上海赢科投资有限公司</a>。 <a class="a4" href="">蒙ICP备06004630号</a> <a class="a5" href="">广告刊例</a></p>
</div>
</div>
多页面转跳
css/nav.css
.nav-a.active {
background-position-y: -48px;
}
主页修订
<a href="w3c网站.html" title="w3c在线教学"></a>
<a title="html/css教程" href="html/h.html" class="nav-a nav-a1"></a>
<a href="html/j.html" class="nav-a nav-a2"></a>
html/h.html
<a href="../w3c网站.html" title="w3c在线教学"></a>
<a title="html/css教程" href="h.html" class="nav-a nav-a1 active"></a>
<a href="j.html" class="nav-a nav-a2"></a>
html/j.html
<a href="../w3c网站.html" title="w3c在线教学"></a>
<a title="html/css教程" href="h.html" class="nav-a nav-a1"></a>
<a href="j.html" class="nav-a nav-a2 active"></a>
w3c网站案例的更多相关文章
- Net开发的部分知名网站案例
.Net开发的部分知名网站案例:http://www.godaddy.com 全球最大域名注册商http://www.ips.com 环迅支付,国内最早的在线支付平台http://www.icbc.c ...
- jQuery Mobile手机网站案例
jQuery Mobile手机网站案例 一.总结 一句话总结:jQuery Mobile是纯手机框架,和amazeui和bootstrap都可以做手机网站. 1.另一款文本编辑器? jd编辑器 二.j ...
- 国外经典设计：12个漂亮的移动APP网站案例
优秀的移动应用程序网站是设计灵感的重要来源.从美丽的图像,合理的使用空白到排版和颜色的使用,似乎设计师都加倍努力以创造一些美好和独特的设计来推广自己的应用程序. 因此,在这篇文章中,我们已经聚集了13 ...
- PHP绿色集成环境在云服务器上的应用，PHPWAMP在服务器上搭建网站案例
问:什么叫WAMP?答:Windows下的Apache+Mysql+PHP,称之为WAMP. 本文案例采用的PHP集成环境是我自己开发的纯绿色版WAMP软件(PHPWAMP). 我在这款集成环境里集成 ...
- 12个优秀的国外Material Design网站案例
眼看2017年就快完了,你是不是还没完全搞懂Material Design呢?是嫌说明文档太长,还是觉得自己英文不好?都没关系,小编今天给大家整理了一份干货满满的学习笔记,并列举了一些国外的Mater ...
- android向web提交参数的4种方式总结，附带网站案例源码
第一种:基于http协议通过get方式提交参数 1.对多个参数的封装 public static String get_save(String name, String phone) { /** * ...
- Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...
- 优秀案例：12个精美的设计工作室 & 设计公司网站
如果你正在为自己的作品集网站设计寻找灵感,那么学习设计机构 & 设计公司的网站是如何制作的是一个良好的开端.在这篇稳重,我们已经聚集了一组设计机构的优秀作品集网站,你可以借鉴很多设计理念.当你 ...
- 【分享】.Net有哪些大型项目、大型网站的案例？
.Net开发的部分知名网站案例:http://www.godaddy.com 全球最大域名注册商http://www.ips.com 环迅支付,国内最早的在线支付平台http://www.icbc ...
随机推荐
- win10 任务栏上的工具栏，重启消失的解决方法
首先谈下 <任务栏的工具栏> 对于很多人来言,还是有可取性的 任务栏的工具栏对编程者的作用 一般来说,我们会经常查看某些API文档,虽然现在是联网也很方便,但如果都下载下来,整理到一个文件 ...
- jackson springboot配置时间格式
yml文件中这样进行配置 spring: jackson: date-format: yyyy-MM-dd HH:mm:ss spring.jackson.date-format指定日期格式,比如yy ...
- Python问题：SyntaxError: Non-ASCII character '\xe2' in file
SyntaxError: Non-ASCII character '\xe2' in file意思是说,在文件中存在非ASCII字符: ASCII是8位即一个字符,一共256个字符,随着计算机的发展, ...
- jQuery中关于Ajax的详解
原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...
- Iptables不适用与socks协议吗？
需求描述 现有一个台多公网IP服务器,用作于内网网关,通过NAT访问公网使用,要求不同的内网地址访问公网时使用不同的公网IP.可以简单理解为内网与公网IP进行一对一访问外网的映射. 服务器名称 I ...
- 【java】ORA-12505, TNS:listener does not currently know of SID given in connect descriptor
如果是负载均衡,则 jdbc.url=jdbc:oracle:thin:@(description=(address_list= (address=(host=XX.XXX.X.XX) (protoc ...
- python发邮件报错SMTP AUTH extension not supported by server."
在login(username,password)之前添加 smtp.ehlo() smtp.starttls() d ={'smtp_server': '','smtp_email': '','sm ...
- Codeforces886(Technocup2018) F Symmetric Projections
Codeforces886(Technocup2018) F Symmetric Projections You are given a set of n points on the plane. A ...
- Linux/Unix 多线程通信
线程间无需特别的手段进行通信,因为线程间可以共享数据结构,也就是一个全局变量可以被两个线程同时使用. 不过要注意的是线程间需要做好同步,一般用 mutex. 可以参考一些比较新的 UNIX/Linux ...
- 第03组 Beta冲刺（4/4）
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...