基于百度模板的HTML、CSS编程

最新推荐文章于 2024-06-19 21:45:00 发布

輕裘白馬

最新推荐文章于 2024-06-19 21:45:00 发布

阅读量295

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/q2269934630/article/details/126531255

版权

在基于百度的排版下面，自己使用css和html，写出一个对应相同的网页模板，在模仿的过程中熟悉css的相关操作。

利用id选择器对div1的盒子模型的内边距( padding )、边框( border )和外边距( margin )进行设置，进行排版的美化等功能。

外边距-margin :盒子的边框外围的空白区域;分上下左右四个方向;
内边距-padding :盒子和盒子里面的内容之间的距离;分上下左右四个方向;

宽度-width ;
高度-height ;

边框线-border ;
/*IE盒子模型设置的宽高=实际宽高，如果添加了padding和border则会压缩content的宽高
*/box-sizing: border-box;
/*标准盒子模型实际宽高=设置的宽高+padding+border*/ box-sizing: content-box;

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link rel="stylesheet" href="css/baidu.css">
</head>
<body>
<div id="div1">
    <div id="div2">
/*
需要将这些属性设置统一的格式和内容  因此都可以添加类别class="a1"对这些数据进行统一的设置
*/
        <a class="a1" href="http://news.baidu.com/">新闻</a>&nbsp;&nbsp;
        <a class="a1" href="https://www.hao123.com/?src=from_pc_logon">hao123</a>&nbsp;&nbsp;
        <a class="a1" href="https://map.baidu.com/">地图</a>&nbsp;&nbsp;
        <a class="a1" href="https://live.baidu.com/">直播</a>&nbsp;&nbsp;
        <a class="a1" href="http://baoku.baidu.com/new/index.html">视频</a>&nbsp;&nbsp;
        <a class="a1" href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;&nbsp;
        <a class="a1" href="https://xueshu.baidu.com/">学术</a>&nbsp;&nbsp;
        <a class="a1" href="https://www.baidu.com/more/">更多</a>&nbsp;&nbsp;
    </div>
    <div id="div3" class="auoto">
        <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
            <br/>
        </a>
        <div class="auoto">
            <form  action="盒子模型.html" method="post">
/*
利用盒子先将外部盒子进行居中，居中后这些位于内部的盒子也可以设置为居中的格式，
对于这些单独的数据可以直接以盒子的形式对其进行居中，而不只是对数据进行居中
*/
                <input name="input1" type="text" value="输入内容">
                <input name="input2" type="submit" value="百度一下">
            </form>
        </div>
        <div class="auoto " id="div4" >
            <dl class="auoto">
                <br/>
                <dt><a class="a1" href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜榜-></a></dt>
                <dd class="dd1">1.2022智博会看数字经济新动能</dd><br/>
                <dd class="dd1">2.局长醉驾称市委书记让喝的?官方回应</dd><br/>
                <dd class="dd1">3.安徽多地多措并举抗旱保苗</dd><br/>
                <dd class="dd1">4.美籍外教杀害女学生 二审仍获死刑</dd><br/>
                <dd class="dd1">5老人凌晨被扔半路女子装顺路送回</dd>
            </dl>
        </div>
    </div>

    <div name="baidu">
        <div name="baidu" class="auoto">
            <div class="auoto">
                <a class="text-color" href="//home.baidu.com" target="_blank">关于百度</a>
                <a class="text-color" href="http://ir.baidu.com" target="_blank">About Baidu</a>
                <a class="text-color" href="//www.baidu.com/duty" target="_blank">使用百度前必读</a>
                <a class="text-color" href="//help.baidu.com" target="_blank">帮助中心</a>
                <a class="text-color" href="https://e.baidu.com/?refer=1271" target="_blank">企业推广</a>
                <a class="text-color" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
                <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a>
                <a class="text-color" href="//www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a>
                <span class="text-color">互联网宗教信息服务许可证编号：京（2022）0000043 ©2022&nbsp;Baidu&nbsp;</span>
            </div>
        </div>
    </div>

</div>


</body>
</html>

CSS代码：

#div1{
    padding: 10px;
    margin: 10px;
    width: 100%;
    height: 100%;
    /*
    将id为div1 的盒子 覆盖整个页面
     */
}

#div2{
    padding: 10px;
    margin:10px;
    border: 2px lavender ;
    /*
    border设置盒子线条颜色和背景
     */
}

#div3{
    border: lavender 2px;
    padding:10px;
    position: absolute;
    left: 50%;
    margin-left: -270px;
    top:10px;
    /*
    id选择器
    这里主要是将id为div3的那个盒子块设置成居中的格式
    margin-left: -270px;由于我这里的图片大小是540px
    因此使用这个命令，相当于就是将这整个盒子模型向右移动图片的一半
    在使用left: 50%; 将图片的中心移动到屏幕相对位置的50% 即移动到最中间的位置
     */
}

.auoto{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    /*
    这里使用类选择器
    可以让一个盒子实现水平居中，需要满足两个条件︰
    1. 必须是块级元素。
    2．盒子必须指定了宽度。
    只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。实际工作中常用这种方式来进行网页布局，示例如下∶
    .auoto {
    width: 960px;
    margin: 0 auto; /*表示上下外边距为0，左右水平居中*/
}

input[name="input1"]{
    width: 300px;
    height: 30px;
    border-radius: 10px;
    /*
    使用属性选择器
    设置框的大小和字体的大小
     */
}

input[name="input2"]{
    height: 36px;
    border-radius: 10px;
}

.a1{
    font-size: 18px;
    color: black;
    text-decoration: none;
    /*
    text-decoration: none;主要是为了去除超链接中的下划线
     */
}

.dd1{
    font-size: 20px;
    color: black;
    text-decoration: none;
}


div[name*="baidu"]{
    width: 100%;
    position: fixed;
    line-height: 40px;
    bottom: 0;
    font-size: 14px;
    color: black;
    text-decoration: none;
}

最终显示的页面：

对于百度热搜榜下面的那些个推荐消息：

由于需要将这些数据进行按照每行进行排列，因此选择的是行级标签，可以选择<p>标签，或者<a>标签这些。块级元素和行级元素之间可以互相转换，其转换主要是运用：


/*块转行内:display:inline;*/
/*行内转块:display:block;*/
/*块、行内元素转换为行内块: display.inline-block;*/

div {
    display: inline;
    /*块级元素转为行内元素，宽高会失效*/
}
span {
    display: block;
    *行内元素转为块级元素，可以设置宽高*/
}
a {
    display: inline-block;
    *行内元素转为行内块元素，可以设置宽高，在一行内显示*/
}
p {
    display: inline-block;
    *块级元素转为行内块元素，可以设置宽高，在一行内显示*/
}

在写这个模板的时候主要遇到了一些问题就是如何将盒子居中，如何将盒子中的文字居中，

在，可以将最外层的盒子居中后，对内部的盒子进行居中处理。

其中将盒子居中的办法有：

/*方法一：*/
#div3{
    border: lavender 2px;
    padding:10px;
    position: absolute;
    left: 50%;
    margin-left: -270px;
    top:10px;
    /*
    id选择器
    这里主要是将id为div3的那个盒子块设置成居中的格式
    margin-left: -270px;由于我这里的图片大小是540px
    因此使用这个命令，相当于就是将这整个盒子模型向右移动图片的一半
    在使用left: 50%; 将图片的中心移动到屏幕相对位置的50% 即移动到最中间的位置
     */
}

/*方法二：*/

.auoto{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    /*
    这里使用类选择器
    可以让一个盒子实现水平居中，需要满足两个条件︰
    1. 必须是块级元素。
    2．盒子必须指定了宽度。
    只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。实际工作中常用这种方式来进行网页布局，示例如下∶
    .auoto {
    width: 960px;
    margin: 0 auto; /*表示上下外边距为0，左右水平居中*/
}

方法三：

/*1.盒子居中使用margin，给定左右边距为auto即可。*/
/*2文字居中使用text-align: center;*/
div {
    width: 300px;
    height: 200px;
    border: 1px solid deeppink;
    margin: 0 auto; /*盒子居中使用margin */
    text-align: center;/*文本居中使用text-align*/
}

/*方法四：*/
/*实现盒子垂直居中*/
/*1.使用padding实现子元素的垂直居中*/

 #outer {
     width: 300px;
     /*父元素不能设置高度，要让它自动被填充起来*/
     background: #ddd;
     padding: 100px ;/*给父元素设置相等的上下内边距*/
 }
#inner {
    width: 200px;
    height: 100px;
    background: #F7A750;
    line-height: 50px;
}