制作百度页面的学习

最新推荐文章于 2022-06-21 19:19:32 发布

ACE1125

最新推荐文章于 2022-06-21 19:19:32 发布

阅读量535

点赞数 3

分类专栏：前端文章标签： link position HTML 制作百度页面

本文链接：https://blog.csdn.net/h_h_1122/article/details/98209988

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

理论知识

rel:规定当前文档与被链接文档之间的关系

icon：指定标题栏、地址栏、收藏栏小图标

sizes：规定被链接资源的尺寸，只有当被链接资源为图标（rel="icon"）时，才能使用该属性。sizes=any:任意尺寸

内嵌样式表：在<head></head>内的<style></style>为内嵌样式表

a.id选择器：#id的值
b.标签选择器
c.class类选择器：.class值

position:定位属性；absolute:绝对定位；relative：相对定位；fixed:固定定位

position: relative;相对定位

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）
2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）
3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）?
（两个都为定位元素，后面的会覆盖前面的定位）

2. position: absolute;绝对定位

1> 使元素完全脱离文档流（在文档流中不再占位）
2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
6> 提升层级（同相对定位）

3. position: fixed;固定定位?

fixed生成固定定位的元素，相对于浏览器窗口进行定位。

4. position:static：默认值默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5. position: sticky 粘性定位粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit规定应该从父元素继承 position 属性的值。

7. posiyion: initial 设置该属性为默认值，详情查看CSS initial 关键字initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

CSS样式设计

#header a{                                  //id选择器样式里面设计标签<a></a>的样式格式：#id的值 a{ }
               margin-left: 18px;   //据左边的距离
               font-weight: bold;   //font-weight字体加粗属性：bold加粗字体
               color: black;        //color字体颜色属性
           }

注意：此元素只能存在于 head 部分，不过它可出现任何次数。

#header a:link{
               color: black; /*鼠标移入前*/

           }
           #header a:visited{
               color: black;   /*鼠标点击时*/
           }
           #header a:hover{
               color: blue; /*鼠标滑过时*/
           }
           #header a:active{
               color: blue;   /*鼠标点击后*/
           }

属性        值        描述
charset   char_encoding   HTML5 不支持该属性。定义被链接文档的字符编码方式。
href         URL              定义被链接文档的位置。
hreflang language_code   定义被链接文档中文本的语言。
media      media_query   规定被链接文档将显示在什么设备上。
rel            icon             必需。定义当前文档与被链接文档之间的关系。
rev   reversed relationship   HTML5 不支持该属性。定义被链接文档与当前文档之间的关系。
sizesNew   HeightxWidth
                any                       定义了链接属性大小，只对属性 rel="icon" 起作用。
target        _blank                 HTML5 不支持该属性。定义在何处加载被链接文档。
type       MIME_type        规定被链接文档的 MIME 类型。

制作百度页面代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       
       <link href="img/百度.jpg" rel="icon" sizes="any" type="image/x-icon" />
       <title>百度一下，你就知道</title>
       
        <style>html,body{height: 100%;}
           html{overflow-y:auto}
           body{font:12px arial;text-align:;background:#fff}

           #header{
               position: absolute;/*定位、绝对定位*/
               right: 6%;
               top: 6%;
               font-size: 13px;
           }
           #header a{
               margin-left: 18px;
               font-weight: bold;
               color: black;
           }
           #header a.c1{
               font-weight: normal;
           }
           .s_bri{
               color: white;
               background-color: #3388FF;
               border-style: none;
               margin-left: 18px;
           }
           .img1{
               position: relative;
               right: 40px;
               top: 60px;
               width: 290px;
               height: 140px;
           }
           #input1{
               position: relative;
               top: 100px;
               right: 0px;
               width: 500px;
               height: 30px;
           }
           #bu{
               position: relative;
               top: 100px;
               right: 0px;
               color: white;
               background-color: #3388FF;
               border-style: none;
               width: 100px;
               height: 35px;
           }
           #header a:link{
               color: black; /*鼠标移入前*/

           }
           #header a:visited{
               color: black;   /*鼠标点击时*/
           }
           #header a:hover{
               color: blue; /*鼠标滑过时*/
           }
           #header a:active{
               color: blue;   /*鼠标点击后*/
           }
           #imgStyle{
               position: relative;
               width: 120px;
               height: 120px;
               top: 130px;
               right: 30px;
               border: 6px solid whitesmoke;
           }
           #imgStyle .img2{
               position: relative;
               padding-left: 5px;
               padding-right: 5px;
               padding-top: 5px;
               padding-bottom: 5px;
               width: 110px;
               height: 110px;

           }
           .APP{
               position: relative;
               top: 130px;
               right: 30px;
           }
           .APP .text1{
               color: #333;
               font-size: 16px;
               line-height: 32px;
               letter-spacing: 3px;
           }
           .APP .text2{
               color: #999999;
               font-size: 16px;
           }
              #yejiao{
               position: relative;
               top: 120px;
               left: 320px;
              }
              #yejiao a{
               margin: 18px;
               color: #999999;
              }
              #JS{
               position: relative;
               top: 120px;
               left: 270px;
              }
              #JS a{
               color: #999999;
              }
              #JS #cp{
               color: #999999;
              }
        </style>
   </head>
   <body>
       
       <div id="header">
           
            <a href="http://news.baidu.com/">新闻</a>
            <a href="https://www.hao123.com/">hao123</a>
            <a href="http://map.baidu.com/">地图</a>
            <a href="http://v.baidu.com/">视频</a>
            <a href="http://tieba.baidu.com/">贴吧</a>
            <a href="http://xueshu.baidu.com/">学术</a>
            <a href="https://me.csdn.net/h_h_1122">SCDN博客</a>
            <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" class="c1">登录</a>
            <a href="http://www.baidu.com/gaoji/preferences.html" class="c1">设置</a>
            <a href="http://www.baidu.com/more/" style="width: 100px; background-color: #3388FF;color: white;font-weight: normal;">更多产品</a>

           
       </div>
       <center>
           <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs">
       <img src="img/bd_logo1.png" class="img1" title="点击一下，了解更多"/></a>
       <div>
           <input type="text" id="input1" />
           <input type="button" value="百度一下" id="bu" οnclick="changeShu()"/>
       </div>
       <br /><br />
       <div id="imgStyle">
       <img src="img/qrcode.png" class="img2" />
       </div>
       <div class="APP">
           <p class="text1">下载百度APP</p>
           <p class="text2">有事搜一搜  没事看一看</p>
       </div>
       </center>
       <div id="yejiao">
           <a href="//www.baidu.com/cache/sethelp/help.html" target="_blank">把百度设为主页</a>
           <a href="http://home.baidu.com" target="_blank">关于百度</a>
           <a href="http://ir.baidu.com" target="_blank">About Baidu</a>
           <a href="http://e.baidu.com/?refer=888">百度推广</a>
       </div>
       <div id="JS">
       <p id="cp">©2019 Baidu <a href="http://www.baidu.com/duty/">使用百度前必读</a> </a>
               <a href="http://jianyi.baidu.com/" class="cp-feedback" >意见反馈</a> 京ICP证030173号 
               <img src="img/JB.jpg" width="15px" height="15px"/> 
               <a id="jgwab" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a> 
               <img src="img/JB.jpg" width="15px" height="15px"/>
       </p>
       </div>
   </body>
   <script type="text/javascript">
       function changeShu(){
           window.open("http://127.0.0.1:8020/%E7%8C%9C%E6%95%B0%E5%AD%97/index.html?__hbt=1564733419786");
       }
   </script>
</html>

运行结果：

跳转到猜数字游戏