博客

HTML+CSS模仿百度首页

  • Post author:
  • Post category:其他



目录



一 实现界面

在这里插入图片描述



二 实现代码



2.1 baidu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/baidu.css"/>
</head>
<body>
<a href="http://news.baidu.com/" target="_self" name>新闻</a>
<a href="https://www.hao123.com/?src=from_pc_logon" target="_self" name>hao123</a>
<a href="https://map.baidu.com/" target="_self" name>地图</a>
<a href="#" target="_self" name>直播</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_self" name>视频</a>
<a href="https://tieba.baidu.com/index.html" target="_self" name=>贴吧</a>
<a href="#" target="_self" name>学术</a>
<a href="https://www.baidu.com/more/" target="_self" name>更多</a><br/>
<div id="baidu">
</div>
<div id="scn">
    <input type="text"  value="百度一下,你就知道"/>&nbsp;
    <input type="submit" id="shousuo" value="百度一下"/>
</div>
<p style="text-align: center;font-size: 20px">百度热搜榜:</p>
<ol>
    <li>直播:袁老遗体告别仪式</li>
    <li>袁老身上覆盖着鲜红的国旗</li>
    <li>放羊大叔连救6名山地越野赛选手</li>
    <li>袁隆平曾用小提琴演奏我的祖国</li>
    <li>31省区市新增确诊18例均为境外输入</li>
    <li>造纸厂纷纷停产</li>
</ol>
<br/>
<a href="https://www.baidu.com/" target="_self" id>设为首页</a>
<a href="https://home.baidu.com/" target="_self" id>关于百度</a>
<a href="https://ir.baidu.com/" target="_self" id>About Baidu</a>
<a href="https://www.baidu.com/duty/" target="_self" id>使用百度前必读</a>
<a href="https://e.baidu.com/?refer=1271" target="_self" id>意见反馈</a>
<a href="https://help.baidu.com/" target="_self" id>帮助中心</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_self" id>京公网安备11000002000001号</a>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_self" id>京ICP证030173号</a>
<span>&copy;2021&nbsp;Baidu(京)-经营性-2017-</span><br/>
<p style="text-align: center;font-size: 20px">0020信息网络传播视听节目许可证0110516</p>
</body>
</html>

html页面布局主要用到的标签有div标签、a标签、input输入框标签、ol标签（有序列表）

段落标签、转义字符&copy。



2.1.1 盒子标签


  • <div></div>

    :一行只能放一个大盒子


  • <span></span>

    : 一行可以放多个小盒子 

<div>这是头部</div>
<span>今日价格</span>



2.1.2 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本</a>



2.1.3 列表标签

<ul></ul>	无序列表	里面只能包含li，没有顺序。li里面可以包含任何标签
<ol></ol>	有序列表	里面只能包含li，有顺序
<dl></dl>	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签



2.1.4 表单控件(表单元素)


  • input

    输入表单元素

  • input

    是个单标签，

    type

    属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)



2.2 baidu.css

#baidu {
    width: 540px;
    height: 258px;
    margin: auto;
    border: 1px solid white;
    background-image: url("img2/百度.png");
}
#scn {
    width: 300px;
    height: 20px;
    border: 1px solid white;
    margin: auto;
}
ol li {
    list-style-position: inside;
    text-align: center;
    font-size: 20px;
}
a[id] {
    font-size: 20px;
    color: blue;
}
a[name] {
    font-size: 20px;
    color: blue;
span {
    font-size: 20px;
}

CSS布局主要用到的选择器有id选择器、后代选择器、标签选择器、属性选择器。



2.2.1 类选择器多类名

我们可以给一个标签指定多个类名，简单理解就是一个标签有多个名字 

<div class="c1 c2">明凯</div>

在标签 class 属性中写多个类名

多个类名中间必须用空格分开

这个标签就可以分别具有这些类名的样式

多类名开发中使用场景：

可以把一些标签元素相同的样式(公共的部分)放到一个类里面

这些标签都可以调用这个公共的类，然后再调用自己独有的类

从而节省CSS代码，统一修改也方便



2.2.2 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

HTML 元素以 id属性 来设置 id 选择器，CSS中 id 选择器 以 “#” 来定义 


  <style>
        #div1 {
            color:green;
        }
    </style>

<body>

    <div id="div1">秦大林子</div>

</body>



2.2.3 后代选择器

  • 后代选择器又称为包含选择器，

    可以选择父元素里面的子元素
  • 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代 
元素1 元素2 {
    样式声明
}



三 百度logo

在这里插入图片描述



四 总结

通过本次作业的简单练习,掌握了html、css一些常见标签的属性和用法。

标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代


版权声明：本文为Fireloli7原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。