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 ...

随机推荐

centos curl安装
二.安装 1.解压下载到的压缩包为curl-7.51.0.tar.gz,使用命令 tar -zxvf curl-7.51.0.tar.gz 解压. 2.进入解压出的目录curl-7.51.0, ...
AjAX2 异步通信异常处理
<!DOCTYPE html> <html lang="en"> <head> <title>xmlhttprequest ajax ...
rtmpdump应用在window中
rtmp.c 中RTMP_GetTime()函数要改成如下: #pragma comment(lib, "winmm.lib ")uint32_tRTMP_GetTime(){// ...
【Js】创建对象的6种方式总结、（底部包含属性名为动态的形式）
一.new 操作符 + Object 创建对象 1 var person = new Object(); 2 person.name = "lisi"; 3 person.age ...
[BZOJ2667][cqoi2012][kcoj]模拟工厂
题目描述 Description 有一个称为“模拟工厂”的游戏是这样的:在时刻0,工厂的生产力等于1.在每个时刻,你可以提高生产力或者生产商品.如果选择提高生产力,在下一个时刻时工厂的生产力加1:如果 ...
Json、Pickle
目录 Json pickle Json JSON是一个序列化模块,一种用于存储和交换数据的语法. JSON是用JavaScript对象表示法(JavaScript object notation)格式 ...
根据IP查询所在城市接口（查询用户所在城市）
转自:https://blog.csdn.net/liona_koukou/article/details/75646313 最近项目有用到定位用户客户端打开页面时所在的城市的需求,找到如下接口,做个 ...
PHP读取文件内容的五种方式
-----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path ...
Affy包 estrogen包
下载安装 if (!requireNamespace("BiocManager", quietly = TRUE)) install.packages("BiocMana ...
BAT脚本入门
BAT脚本入门 echo:显示命令后的字符 chcp 65001: 就是换成UTF-8代码页 echo off: 此语句后的所有运行命令都不显示命令行语句 @:与echo off相似,但它加在每个命令 ...

w3c网站案例

w3c网站

reset操作

header头部

css

html

nav导航栏

css

html

main主体

css

html

footer页脚

css

html

多页面转跳

css/nav.css

主页修订

html/h.html

html/j.html

w3c网站案例的更多相关文章

随机推荐

热门专题