HTML初学（五）

最新推荐文章于 2020-10-06 08:30:00 发布
最新推荐文章于 2020-10-06 08:30:00 发布
阅读量132 收藏
点赞数
原文链接：http://www.cnblogs.com/jason-yijun/p/5602323.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/css0620.css"/>
</head>
<body>
<header class="header">
    <div class="header_01">
        <div class="header_01_01">
            <img src="./img/logo.png" alt=""/>
        </div>
        <div class="header_01_02">
            <input type="text"/>
            <a href="#"></a>
        </div>
        <div class="header_01_03">
            <a href="#">sign&nbsp;in/up</a>
        </div>
        <div class="header_01_04">
            <a href="#">what's&nbsp;on</a>
        </div>
        <div class="header_01_05">
            <a href="#">watchlist</a>
        </div>
        <div class="header_01_06">
            <a href="#">news&nbsp;&&nbsp;features</a>
        </div>
    </div>
</header>
<div class="body">
    <div class="body_01">
        <div class="body_01_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Today's</span>&nbsp;<span>News</span></p>
        </div>
        <div class="body_01_02">
            <img src="./img/160113-news-chicago-hp-lg.jpg" alt=""/>
            <p>adsf asdfsa asdf asfd asdf asdfasdfasdf asdfasdf</p>
            <p>asdf asdffasdfasd asdf</p>
        </div>
        <div class="body_01_03">
            <div class="body_01_03_01">
                <img src="./img/170x170.png" alt=""/>
                <p>asfd asdf asdf</p>
                <p>sdafasdf asdfasdf</p>
            </div>
            <div class="body_01_03_02">
                <img src="./img/170x170.png" alt=""/>
                <p>asfd asdf asdf</p>
                <p>sdafasdf asdfasdf</p>
            </div>
        </div>
        <div class="body_01_04">
            <img src="./img/160113-news-heroes-hp-sm.jpg" alt=""/>
            <p><span>asdf</span> asdfdf sadsfasd fasd fasdfa sdfasdf asdfas dfasdf<br/><span>adfasdfasdf</span></p>
        </div>
    </div>
    <div class="body_02">
        <div class="body_02_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Photo</span>&nbsp;<span>Gallery</span></p>
        </div>
        <div class="body_02_02">
            <img src="./img/gettyimages-504404784.jpg" alt=""/>
            <p>dsf asdfasdf asdfadf fasdf</p>
            <p>asdf adsfasd sadfa adsfad fasdf</p>
        </div>
    </div>
    <div class="body_03"></div>
    <div class="body_04">
        <div class="body_04_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Trending</span>&nbsp;<span>Full&nbsp;Episodes</span></p>
        </div>
        <div class="body_04_02">
            <div class="body_04_02_01">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_02">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_03">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_04">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_05">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_06">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="footer_01">
        <div class="footer_01_01">
            <div class="footer_01_01_01"></div>
            <div class="footer_01_01_02">
                <div class="footer_01_01_02_01">
                    <div class="footer_01_01_02_01_01">
                        <a href="#"></a>
                    </div>
                    <div class="footer_01_01_02_01_02">
                        <a href="#"></a>
                    </div>
                </div>
                <div class="footer_01_01_02_02">
                    <div class="footer_01_01_02_02_01">
                        <ul>
                            <li><a href="#">help</a></li>
                            <li><a href="#">media&nbsp;kit</a></li>
                            <li><a href="#">mobile</a></li>
                        </ul>
                    </div>
                    <div class="footer_01_01_02_02_02">
                        <p>&copy;2016&nbsp;CBS&nbsp;sadfasdf</p>
                    </div>
                    <div class="footer_01_01_02_02_03">
                        <ul>
                            <li><a href="#">help</a></li>
                            <li><a href="#">media&nbsp;kit</a></li>
                            <li><a href="#">mobile</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_01_02">
            <div class="footer_01_02_01">
                <p>Watch&nbsp;TV.&nbsp;Anytime.<br/>Anywhere.</p>
                <p>Download asdfafasdfa</p>
                <div class="footer_01_02_02">
                    <div class="footer_01_02_02_01">
                        <a href="#"></a>
                    </div>
                    <div class="footer_01_02_02_02">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>











body,header,div,footer,div,input,a,ul,li,p{
    margin: 0;
    padding: 0;
}
header{
    width: 100%;
    height: 100px;
    background-color: #f2f3f7;
}
.header_01{
    width: 100%;
    height: 60px;
    background-color: #191c1f;
    overflow: hidden;
}
.header_01 div{
    float: left;
    height: 100%;
}
.header_01_01{
    background-color: red;
}
.header_01_01 img{
    height: 100%;
}
.header_01_02 input{
    border: 0px;
    outline: none;
    background-color: #303336;
    height: 100%;
    width: 252px;
    padding-left: 4px;
}
.header_01_02 a{
    display: block;
    height: 100%;
    float: right;
    width: 52px;
    background-image: url("../img/sprite.png");
    background-repeat: no-repeat;
    background-position: -116px -160px;
    border-right: 1px solid #282a2d;
}
.header_01_03{
    width: 197px;
    border-left: 1px solid #242729;
    border-right: 1px solid #1e2224;
    background-color:#25282a;
}
.header_01_03 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 50px;
}
.header_01_04{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_05{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_06{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_04 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 38px;
}
.header_01_05 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 36px;
}
.header_01_06 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 10px;
}
.footer{
    width: 100%;
    height: 240px;
    background-color: #383d43;
    overflow: hidden;
}
.footer_01{
    width: 1200px;
    height: 210px;
    padding-top: 30px;
    margin: auto;
}
.footer_01 div{
    float: left;
}
.footer_01_01{
    width: 50%;
    height: 100%;
    float: left;
}
.footer_01_02{
    width: 50%;
    height: 100%;
    position: relative;
}
.footer_01_01_01{
    width: 81px;
    height: 60px;
    background: url("../img/section_icon.png");
    background-size: 100%;
}
.footer_01_01_02{
    width: 75%;
    height: 80%;
    margin-left: 50px;
}
.footer_01_01_02_01{
    width: 100%;
    height: 23px;

}
.footer_01_01_02_01_01{
    float: left;
    width: 24px;
    height: 23px;
}
.footer_01_01_02_01_01 a:hover{
    background-position:-35px -4px;
}
.footer_01_01_02_01_01 a{
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/sprite.png");
    background-position: -4px -4px;
}
.footer_01_01_02_01_02{
    float: left;
    width: 24px;
    height: 23px;
}
.footer_01_01_02_01_02 a:hover{
    background-position:-100px -4px;
}
.footer_01_01_02_01_02 a{
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/sprite.png");
    background-position: -72px -4px;
}
.footer_01_01_02_02_01{
    width: 100%;
}
.footer_01_01_02_02_01 ul li{
    float: left;
    list-style: none;
    text-transform: capitalize;
}
.footer_01_01_02_02_01 ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
}
.footer_01_01_02_02_01 ul li:nth-child(1){
    padding-right: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_01 ul li:nth-child(2){
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_01 ul li:nth-child(3){
    padding-left: 10px;
}
.footer_01_01_02_02_02{
    color: #4c545b;
    font-size: 12px;
    width: 100%;
    line-height: 0;
    margin-top: 10px;
    margin-bottom: 6px;
}
.footer_01_01_02_02_03{
    width: 100%;
}
.footer_01_01_02_02_03 ul li{
    float: left;
    list-style: none;
    text-transform: capitalize;
}
.footer_01_01_02_02_03 ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
}
.footer_01_01_02_02_03 ul li:nth-child(1){
    padding-right: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_03 ul li:nth-child(2){
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_03 ul li:nth-child(3){
    padding-left: 10px;
}
.footer_01_02_01{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -240px;
}
.footer_01_02_01 p:nth-child(1){
    font-size: 18px;
    color: #ffffff;
}
.footer_01_02_01 p:nth-child(2){
    font-size: 12px;
    color: #4f565a;
}
.footer_01_02_02{
    width: 100%;
}
.footer_01_02_02_01{
    width: 50%;
    height: 49px;
}
.footer_01_02_02_01 a{
    display: block;
    width: 150px;
    height: 100%;
    background: url("../img/app_store.png");
}
.footer_01_02_02_02{
    width: 50%;
    height: 49px;
    margin-left: -80px;
}
.footer_01_02_02_02 a{
    display: block;
    width: 150px;
    height: 100%;
    background: url("../img/google_play.png");
}
.body{
    width: 1170px;
    margin: auto;
    clear: both;
    overflow: hidden;
}
.body>div{
    float: left;
    overflow: hidden;
    margin-bottom: 30px;
}
.body_01{
    width: 370px;
    margin-right: 30px;
    border-bottom: 1px solid #dadada;
    padding-bottom: 10px;
}
.body_02{
    width: 370px;
    border-bottom: 1px solid #dadada;
    padding-bottom: 10px;
}
.body_03{
    width: 370px;
    margin-left: 30px;
}
.body_01_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_01_01 span:nth-child(3){
    color: red;
}
.body_01_02{
    width: 100%;
}
.body_01_02 p:nth-child(2){
    font-size: 20px;
    text-transform: capitalize;
    word-wrap: break-word;
    margin: 10px 0;
}
.body_01_02 p:nth-child(3){
    font-size: 12px;
}
.body_01_03{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}
.body_01_03_01{
    width: 170px;
    float: left;
}
.body_01_03_01 img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}
.body_01_03_01 p:nth-child(2){
    font-weight: 800;
    text-transform: capitalize;
}
.body_01_03_01 p:nth-child(3){
    text-transform: capitalize;
}
.body_01_03_02{
    width: 170px;
    float: right;
}
.body_01_03_02 img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}
.body_01_03_02 p:nth-child(2){
    font-weight: 800;
    text-transform: capitalize;
}
.body_01_03_02 p:nth-child(3){
    text-transform: capitalize;
}
.body_01_04{
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
.body_01_04 img{
    float: left;
}
.body_01_04 p{
    word-wrap: break-word;
    padding-left: 90px;
    padding-top: 5px;
    text-transform: capitalize;
    font-weight: 800;
}
.body_01_04 span:nth-child(1){
    font-style: oblique;
}
.body_01_04 span:nth-child(3){
    font-weight: 500;
    font-style: normal;
}
.body_02_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_02_01 span:nth-child(3){
    color: red;
}
.body_02_02{
    width: 100%;
    margin-bottom: 10px;
}
.body_02_02 p:nth-child(2){
    font-size: 30px;
    font-weight: 800;
}
.body_02_02 p:nth-child(3){
    font-size: 16px;
    margin-bottom: 10px;
}
.body_04{
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #dadada;
    padding-top: 10px;
}
.body_04_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_04_01 span:nth-child(3){
    color: red;
}
.body_04_02 div{
    float: left;
    margin-right: 30px;
    width: 170px;
}
.body_04_02_06{
    margin-right: 0px !important;
}
.body_04_02 img{
    width: 100%;
}
.body_04_02 p{
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}














 

转载于:https://www.cnblogs.com/jason-yijun/p/5602323.html

L511602
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《Flask Web开发实战：入门、进阶与原理解析》笔记代码学习和注释（第三章-模板）
numb_ac的博客
10-18 390
一、模板的形成 模板的设计，可以看做是一个一层一层装饰的过程 模板（template），对应的是MTV结构里面的T，在flask里面主要用来进行对HTML的渲染，然后显示到用户面前。所以其基础是HTML 模板里面除了HTML语法之外，还包含了控制语句和很多有用的函数，以及一些有用的规则。 还可以通过自定义全局函数、全局变量、过滤器、测试器等函数来丰富模板的功能。 二、模板的组织 局部模板：可以让模板之间进行继承，实现重复子模板的重用 宏：同样地，子代码也能重用，其实它就相当于是模板里的“函数”，注意
HTML初学
xdRao的专栏
07-30 651
Heading 1 My 1 paragraph. Heading 2 My 2 paragraph.   This is a link to my CSDN
CSS的图表
courseware的专栏
12-02 594
基本的CSS图表     .graph {          position: relative; /* IE is dumb */         width: 200px;          border: 1px solid #B1D632;          padding: 2px;      }     .graph .bar {          display: block;
CSS盒模型之内边距、边框、外边距 十九问 （持续更新）
weixin_43964148的博客
10-06 644
第一问：什么是盒模型？第二问：两者的区别是什么？第三问：怎么设置这两种模型呢？第四问JS怎么获取和设置盒模型的宽高呢，你能想到几种方法第五问：描述一下下面盒子的大小，颜色什么的（cont...
HTML基础知识（五）
jankinZ的博客
07-16 151
表单form（二）< label>表单域HTML5新增类型新增属性placeholderautofocusrequiredmaxlength和minlength新增类型 ：input标签emailsearchurlcolornumberrangedate < label> label是input的描述，本身不会有特殊效果,和其他input标签使用可以提升用户体验，用户不必非...
Html初学练习.zip
01-01
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
html初学者入门教程
05-22
HTML5作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。此教程为新手提供学习指导，有兴趣的可以了解一下。
HTML初学者适用的十五条最佳实践
09-28
以下是十五条针对HTML初学者的实用建议： 1. **保持标签闭合**：确保每个开始标签都有对应的结束标签，避免省略或遗漏，如`<ul>`、`<li>`等，这有助于浏览器正确解析和验证HTML文档。 2. **声明正确的文档类型**：...
HTML CSS 初学的练习.zip
12-30
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML ...
HTML5学习笔记，初学者可以借鉴快速学习html5
12-05
这是我重新温故时候做的html学习笔记，参考于尚学堂 百战程序员文档里有关键的源码和简要的说明，初学者可以作为参考如果有什么问题可以和我一起交流，大家共同进步还望大佬光顾的时候可以给我提提意见
毕设系统—智慧工地监控管理系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕设系统—智慧工地监控管理系统-可执行内含文档代码-可执行内含文档代码.zip
一种基于关键能力的体系贡献率评估方法_李丹.caj
07-28
一种基于关键能力的体系贡献率评估方法_李丹
化学/环境学-线性拟合/零级反应动力学拟合/一级反应动力学拟合/二级反应动力学拟合/三级反应动力学拟合软件
07-28
在进行实验的过程中，常常遇到做出一组数据却不知其效果的困扰，如做出标准曲线却不知其拟合优度。一般需用电脑的专业软件进行拟合，如Origin、MATLAB等，但存在操作步骤复杂，软件需付费等问题。基于上述情况，针对线性拟合（linear fitting）和零级反应动力学拟合（zero-order reaction kinetics fitting）、一级反应动力学拟合（first-order reaction kinetics fitting）、二级反应动力学拟合（second-order reaction kinetics fitting）、三级反应动力学拟合（third-order reaction kinetics fitting）等特殊拟合场景，开发了一个软件，其优势有： a.使用BSD许可证，即允许免费使用、修改和分发； b.支持手机（Android系统）和电脑（Windows系统）双平台使用，便于在实验现场检验实验效果； c.软件界面均采用中文。
731545397801645熊猫侠v1.1.50.apk
07-28
731545397801645熊猫侠v1.1.50.apk
全国行政区划adcode，街道/乡镇级，更新至23年09月，sql文件
最新发布
07-28
更新时间：更新至2023年9月 数据内容：包括全国各级行政区划的最新adcode。adcode是中国行政区域的唯一编码，可用于各种地理信息系统和数据库。 数据格式：提供SQL文件，结构化数据文件，可以用于数据库的导入和更新。
餐饮咖啡西餐厅饮品创业计划书运营策划书.doc
07-28
商业计划书，创业计划书，项目计划书，计划书模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
wpf中团队独立开发模块和左侧2个菜单的框架演示
07-28
wpf中团队独立开发模块和左侧2个菜单的框架演示。 1.付费下载后，博主保证能运行成功，不成功可以联系博主。 2.也可以私下单独联系博主进行付费下载
智慧校园整体解决方案-2PPT(48页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
基于Springboot和Vue的大学生双创竟赛项目申报与路演管理系统源码 大学生双创竟赛项目申报与路演管理系统代码（98分期末
07-28
大学生双创竟赛项目申报与路演管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
ros-arm-tutorials-melodic-devel【程序员VIP专用】.zip
07-28
【资源简介】 ROS机械臂开发教程及代码，涵盖ROS基础、ROS进阶、机械臂Moveit、视觉抓取等内容。示例均提供Python与C++实现，适配Kinetic、Melodic、Noetic、ROS2 Humble版本
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值