HTML入门小练习（二）

已于 2022-05-22 15:17:36 修改
阅读量1.4k 收藏 2
点赞数
文章标签： css3 css html5
于 2022-05-22 12:49:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30635247/article/details/124909187
版权

本次学习的任务目标是进一步学习CSS知识，仿照出百度搜索首页。

在本次学习中，大量使用了CSS样式来对页面进行布局，其中position属性起到了非常重要的作用，但有遗憾的是，在本次任务目标的编写中，对于float属性的使用并不熟练，在使用float属性时文字布局会出现错位，但为了消除行内块之间的默认间距，并保证文字布局的稳定，本次通过对父元素设置font-size:0;来实现。对于本次学习中所学的新知识仍需多加练习进行熟练巩固。

此外，在本次任务目标的编写中，仍有部分原网页的功能未能实现，还需多加研究学习。

效果图：

c0330fa144b44f5ab0b8d9d836daa2e5.png

代码：

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>模仿百度</title>
</head>
<style>
    @font-face{
    font-family:Iconfont;
    src:url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot');
    src:url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot?#iefix') format('embedded-opentype'),
    url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-3585cbf68d.woff2') format('woff2'),
    url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-37ce8725be.woff') format('woff'),
    url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-1965a6bc45.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    }
    * {
        padding: 0;
        margin: 0;
    }
    body{
        background-color: #fff;
        height: 100%;
    }
    .nav{
        height: 60px;
        width: 450px;
        padding-left: 24px;
        font-size: 0;
    }
    .nav a{
        text-decoration: none;
        color: #222;
        display: inline-block;
        font-size: 13px;
        font-family: Arial , sans-serif;
        margin-right: 24px;
        margin-top: 19px;
    }
    a:hover{
        color: rgb(71, 71, 255);
    }
    .dl{
        position: absolute;
        top: 0px;
        right: 0px;
        height: 60px;
        padding-left: 200px;
        padding-right: 24px;
    }
    .dl .sz{
        display: inline-block;
        margin-top: 19px;
        margin-left: 32px;
        color: #222;
        font-size: 13px;
        font-family: Arial, sans-serif;

    }
    .dl .dll:hover{
        background-color: rgb(49, 94, 251);
    }
    .dl .dll{
        display: inline-block;
        margin-left: 32px;
        margin-top: 18px;
        font-size: 13px;
        text-decoration: none;
        color: #fff;
        background-color: #4e6ef2;
        height: 24px;
        width: 48px;
        border-radius: 6px;
        text-align: center;
        line-height: 24px;
    }
    .logo{
        width: 654px;
        height: 314px;
        margin: 0 auto;
    }
    .logo .top{
        bottom: 40px;
        width: 100%;    
        height: 181px;
        text-align: center; 
    }
    .logo .top .logo-one{
        padding-top: 80px;
    }

    .logo .fm #ssk{
        width: 443px;
        height: 16px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 87px;
        border: 2px solid #c4c7ce;
        border-radius: 10px 0 0 10px;
    }
    .logo .fm #ssk:focus{
        outline-color:#4e6ef2;
    }
    .logo .fm #ssk:hover{
        border-color: #a7aab5;
    }
    .logo .fm .ss1{
        width: 546px;
        display: inline-block;
        position:relative
    }
    .logo .fm .ssj{
        width: 108px;
        height: 44px;
        display: inline-block;
        position: absolute;
    }
    .logo .fm .ssj .aj{
        width: 108px;
        height: 44px;
        background-color: #4e6ef2;
        font-size: 17px;
        color: #fff;
        border-radius: 0 10px 10px 0;
        border: none;
    }
    .logo .fm .ssj .aj:hover{
        background-color: #4662d9;
    }
    .logo .fm .ss1 .tp{
        display: inline-block;
        width: 24px;
        height: 20px;
        background-color: #fff;
        background-image: url(images/nc.png);
        background-repeat: no-repeat;
        background-position: 0 -51px;
        position: absolute;
        right: 15px;
        top: 15px;
    } 
    .bom{
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 39px;
        margin: 0;
        line-height: 39px;
        background-color: #fff;
    }
    .bom .bomm{
        text-align: center;
    }
    .bom .bomm .bm{
        display: inline;
        margin-right: 20px;
        list-style: none;
    }
    .bom .bomm .bm .textb{
        color: #bbb;
        font-size: 12px;
        text-decoration: none;
    }
    .bom .bomm .bm .tt{
        width: 49px;
        height: 20px;
        margin-bottom: -5px;
    }
    .right{
        position: absolute;
        right: 24px;
        bottom: 64px;
        width: 44px;
        border-color: #fbfbfb;
        border-radius: 22px;
    }
    .right .r1{
        line-height: 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    .right .r1 .xia{
        width: 18px;
        height: 18px;
        margin: 0 auto;
        background-image: url(images/下载.png);
        background-size: 16px;
        background-position: center;
        border: 1px solid #626675;
        border-radius: 50%;
    }
    .code{
        width: 24px;
        height: 24px;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
    .hot{
        position: relative;
        width: 654px;
        margin: 45px auto 0;
    }
    .hott{
        height: 24px;
        height: 100%;
        font-size: 0;
    }
    .rso{
        text-decoration: none;
    }
    .rsoo:hover{
        color: rgb(49, 94, 251);
    }
    .brdss:hover{
        color: rgb(49, 94, 251);
    }
    .rsoo{
        float: left;
        color: #222;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .bdrs{
        font-family: Iconfont;
    }
    .brdss{
        font-family: Iconfont;
        font-size: 15px;
        color: #9195a3;
    }
    .sys{
        float: right;
        height: 16px;
        position: relative;
        user-select: none;
        top: 1px;
        text-decoration: none;
    }
    .sss:hover{
        color: rgb(49, 94, 251);
    }
    .hhy:hover{
        color: rgb(49, 94, 251);
    }
    .sss{
        position: relative;
        font-family: Iconfont;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        color: #626675;
        display: inline-block;
    }
    .hhy{
        font-size: 14px;
        line-height: 14px;
        color: #626675;
        margin-left: 2px;
    }
    .hotone{
        margin-right: 20px;
        clear: both;
        width: 306px;
        float: left;
        height: 36px;
        line-height: 36px;
    }
    .hottwo{
        margin-left: 15px;
        width: 306px;
        height: 36px;
        line-height: 36px;
        float: left;
    }
    li{
        list-style-type:none;
    }
    .titc{
        float: left;
        height: 36px;
        line-height: 36px;
        width: 100%;
        color: #222;
        text-decoration: none;
    }
    .titt{
        width: auto;
    }
    .titc:visited{
        color: #626675;
    }
    .top1{
        transform: rotate(180deg);
        font-family: Iconfont;
        font-size: 18px;
        font-style: normal;
        color: #f63051;
        height: 18px;
        width: 18px;
        display: inline-block;
        line-height: 18px;
        margin-right: 8px;
        position: relative;
        right: 4px;
    }
    .toptit{
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .fhot{
        margin-left: 6px;
        position: relative;
        top: -2px;
        background-color: #f60;
        padding: 0 2px;
        text-align: center;
        color: #fff;
        line-height: 16px;
        height: 16px;
        font-weight: 200;
        font-size: 12px;
        border-radius: 4px;
    }
    .noo{
        width: 24px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 18px;
        position: relative;
        top:1px;
        display: inline-block;
    }
    .no3{
        color: #faa90e;
    }
    .no1{
        color: #fe2d46;
    }
    .no2{
        color: #f60;
    }
    .no4{
        color: #9195a3;
    }
    .new{
        background-color: #ff455b;
        float: right;
        position: relative;
        top: -25px;
    }
    .titc:hover{
        color: rgb(49, 94, 251);
        text-decoration: underline;
    }
</style>
<body>
    <div class="nav">
    <a href="http://news.baidu.com/" target="_blank">新闻</a>
    <a href="https://www.hao123.com/?src=from_pc" target="_blank">hao123</a>
    <a href="https://map.baidu.com/" target="_blank">地图</a>
    <a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
    <a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
    <a href="https://image.baidu.com/" target="_blank">图片</a>
    <a href="https://pan.baidu.com/" target="_blank">网盘</a>
    <a href="https://www.baidu.com/more/" target="_blank">更多</a>
    </div>
    <div class="dl">
        <span class="sz">设置</span>
        <a class="dll" href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
    </div>
    <div class="logo">
        <div class="top">
            <img class="logo-one" src="images/logo.png">
        </div>
        <form class="fm" action="#">
            <span class="ss1">
                    <input id="ssk" maxlength="255" type="text">
                    <span class="tp"></span>
            </span>
            <span class="ssj">
                <input class="aj" type="submit" value="百度一下">
            </span>
        </form>
        <div class="hot">
            <div class="hott">
                <a class="rso" href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank">
                    <div class="rsoo">
                        <span class="bdrs"></span>
                        <span class="brdss"></span>
                    </div>
                </a>
                <a href="#" class="sys">
                    <span class="sss"></span>
                    <span class="hhy">换一换</span>
                </a>
            </div>
            <ul class="phb">
                <li class="hotone">
                    <a class="titc" href="https://www.baidu.com/s?wd=%E4%BA%A7%E4%B8%9A%E5%8D%87%E7%BA%A7%E6%80%81%E5%8A%BF%E6%B2%A1%E6%9C%89%E6%94%B9%E5%8F%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <i class="top1"></i>
                        <span class="toptit">产业升级态势没有改变</span>
                    </a>
                </li>
                <li class="hottwo">
                    <a class="titc titt" href="https://www.baidu.com/s?wd=%E6%BE%B3%E5%A4%A7%E5%88%A9%E4%BA%9A%E2%80%9C%E5%8F%98%E5%A4%A9%E2%80%9D+%E4%B8%AD%E6%BE%B3%E4%BC%9A%E8%B5%B0%E5%90%91%E4%BD%95%E6%96%B9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <span class="noo no3">3</span>
                        <span class="toptit">澳大利亚“变天” 中澳会走向何方</span>
                    </a>
                    <span class="fhot">热</span>
                </li>
                <li class="hotone">
                    <a class="titc titt" href="https://www.baidu.com/s?wd=%E8%A2%81%E9%9A%86%E5%B9%B3%E9%99%A2%E5%A3%AB%E9%80%9D%E4%B8%96%E4%B8%80%E5%91%A8%E5%B9%B4&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <span class="noo no1">1</span>
                        <span class="toptit">袁隆平院士逝世一周年</span>
                    </a>
                    <span class="fhot">热</span>
                </li>
                <li class="hottwo">
                    <a class="titc titt" href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E6%96%B0%E5%A2%9E%E6%AD%BB%E4%BA%A13%E4%BE%8B+%E6%9C%AC%E5%9C%9F52%2B570&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <span class="noo no4">4</span>
                        <span class="toptit">上海新增死亡3例 本土52+570</span>
                    </a>
                    <span class="fhot">热</span>
                </li>
                <li class="hotone">
                    <a class="titc titt" href="https://www.baidu.com/s?wd=31%E7%9C%81%E4%BB%BD%E6%98%A8%E6%97%A5%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F157%2B667&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <span class="noo no2">2</span>
                        <span class="toptit">31省份昨日新增本土157+667</span>
                    </a>
                    <span class="fhot">热</span>
                </li>
                <li class="hottwo">
                    <a class="titc titt" href="https://www.baidu.com/s?wd=%E8%B0%B7%E7%88%B1%E5%87%8C%E6%88%90%E4%BA%9A%E6%B4%B2%E5%8D%8F%E4%BC%9A%E5%85%A8%E7%90%83%E5%A4%A7%E4%BD%BF%E9%A6%96%E4%BD%8D%E5%A5%B3%E6%80%A7&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                        <span class="noo no4">5</span>
                        <span class="toptit">谷爱凌成亚洲协会全球大使首位女性</span>
                    </a>
                    <span class="fhot new">新</span>
                </li>
            </ul>
        </div>
   </div>
   <div class="right">
       <div class="r1">
           <div class="xia"></div>
       </div>
       <div class="mcode">
           <img class="code" src="images/code3.png">
       </div>
   </div>
   <div class="bom">
       <div class="bomm">
           <p class="bm">
               <a class="textb" href="https://home.baidu.com/" target="_blank">关于百度</a>
           </p>
           <p class="bm">
               <a class="textb" href="http://ir.baidu.com" target="_blank">About Baidu</a>
           </p>
           <p class="bm">
               <a class="textb" href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a>
           </p>
           <p class="bm">
               <a class="textb" href="https://help.baidu.com/" target="_blank">帮助中心</a>
           </p>
           <p class="bm">
               <a class="textb" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
           </p>
           <p class="bm">
               <a class="textb" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP证030173号</a>
           </p>
           <p class="bm">
               <span class="textb">©2022&nbsp;Baidu&nbsp;</span>
           </p>
           <p class="bm">
               <span class="textb">互联网药品信息服务资格证书 (京)-经营性-2017-0020</span>
           </p>
           <p class="bm">
               <a class="textb" href="https://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a>
           </p>
           <p class="bm">
               <img class="tt" src="images/aria.png">
           </p>
       </div>
   </div>
</body>
</html>

maple-link
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mvc入门练习源码.zip
06-18
这个“mvc入门练习源码.zip”文件很可能是为了帮助初学者理解MVC架构的工作原理而提供的一个实践项目。 1. **Model（模型）**：在MVC架构中，模型是应用程序的核心部分，负责处理业务逻辑和数据管理。它封装了应用...
对于html和css初学者，你有什么值得推荐的简单的网页适合练习？
SiKi学院的博客
09-06 389
html和css方面个人认为主要是在于css的学习，变化最多的也在于css，下面主要是介绍一些css相关的练习网站及一些项目，希望对你有帮助~
【前端】学成在线网页项目练习制作
刘佳皓_Leo
10-05 725
学习前端路上的一个练习。
HTML观鸟网小练习
dark_cy的博客
07-05 721
　　刚学了几天，算是把常用的HTML标签过了一遍，于是乎在网上找了一个简单网页练练手。比较简单的一个网页，很适合我这种刚学的，可以很好的熟悉熟悉标签，练练布局啥的。 《原网页在这里》 　　我写了两个版本，第一个是用 table 进行布局的，写完后去跟原网页的源码比较，结果发现人家的布局样式啥的是用的外部 CSS 文件，而我还没学到这个，所以看到前几行我就一脸萌币了... 　　第二个版本是用 div 进行布局的，因为视频里都说 table 真正的功能不是用来布局的，div 才是，所以就用 div 的方式又写了
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
HTML基础入门(超多练习题等你来做！)
10-10 1956
学习目标： 能够使用<img/>显示指定位置的图片 能够看懂<ul><li>进行列表信息的展示 能够使用<a>完成多个页面之间切换 HTML网站图片页面显示案例案例介绍案例相关标签案例练习网站列表页面显示案例介绍相关知识点列表标签：ul ol练习超链接标签: a案例分析表格标签实例练习 网站图片页面显示案例 案例介绍 在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，或者很多地方都是图片的效果，那么我们如何在页面中.
微信小程序开发入门练习篇
03-29
wxml 和 wxss 是新的文件格式，不用理解，就映射成 html 和 css 即可，但是不同的是，有一套自己的标签和支持的范围（比如 css 部分支持度有限），详情可以看上面的官方资料。 项目的结构 下载到 DEMO 过后，...
webgis入门之html与css (练习2)
最新发布
02-26
本文将深入探讨这两个关键技术，并结合"webgis入门之html与css (练习2)"这一主题，来理解它们在WebGIS中的应用。 HTML是用于创建网页结构的语言，它定义了网页的基本元素，如标题、段落、图像、链接等。在WebGIS中...
HTML项目练习
03-23
在HTML入门练习中，通常会涵盖以下知识点： 1. **HTML基本结构**：每个HTML文档都由`<!DOCTYPE>`声明、`<html>`根元素、`<head>`和`<body>`组成。`<head>`用于存放元信息，如页面标题，而`<body>`则包含可见内容。 ...
html5入门练习（一）
syl011002的博客
09-25 554
表单练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1161
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
HTML5入门小练习
qq_30635247的博客
04-30 378
通过学习，本次小练习实现了了html基础的一些编写，但是写的很粗糙，仍需多加练习。 效果图1： 代码： <!DOCTYPE html> <html lang="zn-CH"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新闻..
HTML5网页设计练习
m0_66168318的博客
04-11 559
最终效果图： 素材： 更多>> 奥斯卡影后的纽约俭约豪宅奥斯卡影后娜塔莉—波特曼的这间公寓，整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感… 流光溢彩 施华洛世奇系列珠宝璀璨耀巴世：巴黎古董双年展金融巨头眼中的十大品牌名表 思路： 1.文字部分分为四个区域，即四个盒子（外面还有一个大盒子，共五个div），使用块元素里的div标签，分别给类名（标签语义化）。 2.添加背景图。background，盒子的宽度和高度等于图片的宽度和高度。 3.左上角如何到达目标位置？用小盒.
HTML、css项目上手练习
雨云21的博客
05-04 7971
根据下边的效果图完成一个完整网页的制作 1、头部的制作： （1）制作#tou外盒子效果； （2）制作#tou1内盒子1效果：包括导航与logo； （3）制作#tou2内盒子效果：包括标题与段落文字； ...
【H5】网页入门练习
weixin_44760675的博客
09-23 213
<!DOCTYPE html> <html> <head> <meta cahrset=utf-8""/> <title>入门练习项目</title> </head> <body> <h1>论&nbsp;&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;&nbsp;学的重要性</h1> <!--
前端——14.用HTML做的小练习
m0_52096593的博客
03-15 226
这是初学HTML后做的一些练习，其中主要的div的练习
HTML网页入门练习——淘宝抢购模块设计
m0_53156691的博客
01-28 1337
抢购模块设计 使用浮动属性进行抢购模块的设计。制作过程遵循从外到内，先整体后细节的顺序。 先进行分析：抢购模块分为图片部分（img）和详情部分（info）。其中详情部分又分为标题（title）、补充信息（info-detail）、进度条（progress）、售出信息（sold）和价格（price）五个小部分。
HTML简易网页练习
zhangmingxian1的博客
10-28 1363
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
16、前端：Html5.pdf
04-30
看B站视频项目总结的系列文档，仅供个人学习使用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值