前端 w3c简单布局

其他 2019-08-01 19:11:21 阅读次数: 0

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>

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>

猜你喜欢

转载自www.cnblogs.com/bladecheng/p/11284535.html
w3c
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022