html_css完成搜狗页面

最新推荐文章于 2023-10-23 13:19:51 发布
最新推荐文章于 2023-10-23 13:19:51 发布
阅读量2.6k 收藏 27
点赞数 7
分类专栏： 前端 文章标签： html_css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43338256/article/details/83444909
版权

html_css学习记录（搜狗页面）


html与css

html是超文本标记语言，超文本的意思是它的页面可以包含图片，链接，音乐和程序等非文字元素。主要特点是使用标记来描述网页。
css则是一般与选择器配合使用来设置样式，从而使得网页更加美观。

类选择器与id选择器

类选择器为:class=""，id选择器为:id=""。他们都可以设置样式，而最根本区别是类选择器可以多次出现，而id选择器只可以出现一次。不过使用JavaScript或者动态调用对象时就要用到id。在设置选择器样式的时候，类选择器以".“开头，id选择器以”#"开头。都写在html的 style 里。

margin,border,padding,content的区别

在这里插入图片描述
简单的由里到外的说，content(内容),padding(内边框),border(边框),margin(外边框)
margin:控制块级元素之间的距离，默认顺序是顺时针的上右下左，当上下，左右相等可简写。
padding:控制块级元素内部，即内容(content)与边框(border)的距离。
border:边框。
content:内容。

position

一般用到的是absolute和relative;
absolute是以最近的已定位的父元素，如果父元素本身没有使用position定位，则相对于文档（html）定位。将对象从文档流里拖出使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。
relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，一般配合absolute使用。
绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
一般优先用float其次用position进行排版。

float

参考:https://www.cnblogs.com/acorn/p/5249089.html
float可以让元素脱离标准流，漂浮在标准流上，和标准流不是一个层次。
可以结合clear来使漂流的元素完成排版。

伪类

常用的伪类有以下五种
:active 向已被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的

display

display: none; 元素不显示出来，可与伪类结合使用。
display一般用于转化或规定格式，一般格式为以下三种。
行内元素(inline)：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块状元素(block):
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素(inline-block):
(1)不自动换行
(2)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)默认排列方式为从左到右

琐碎小点

line-height：设置行高；
height: 设置高度;(需要为块状元素才有效）
width: 设置宽度;(需要为块状元素才有效）
z-index: 元素堆叠顺序;
font-size: 字体大小;
color: 元素颜色;
text-decoraton: 一般用于取消下划线;
font-weight: 设置元素粗细;
border-width: 边框厚度;
border-style: 边框格式;
opacity: 透明度;
background: 背景颜色;
text-align: 元素对齐方式;

搜狗网页练习代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>搜狗搜索引擎 - 上网从搜狗开始</title>
</head>

<style>
#header{
    line-height:  24px;
    padding:11px 0px 11px 0px;
    height: 24px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    mid-width: 1000px;
    z-index: 2001;
}

#head-left{
    float: left;
}


#head-right{
    float: left;
    position: absolute;
    top: 10ps;
    right: 5px;
    font-size: 12px;
}

.head-left-style{
    color:black;
    font-size:13px;
    text-decoration:none;
    margin-left: 20px;
    float: left;
}

.head-left-style:hover{
    color: #fd6853;
}

.span-style{
    color: #ff5a34;
    font-size: 13px;
    font-weight: 1000;
    display: block;
    margin-left:20px;
    float: left;
}

.more-down{
    display: inline-block;
    position: relative;
}

.more-down-class{
    display: none;
    border-width: 1px;
    border-style: ridge;
    position: absolute;
    left: 2px;
    top: 26px;
    opacity: 1;
}

.more-down-class a{
    display: block;
    line-height: 29px;
    width: 60px;
    background: #fff;
    font-size: 13px;
    color: #000;
    text-align: center;
    text-decoration: none;
}

.more-down-class a:hover{
    background: #fd6853;
    color: #fff;
}

.local-weather{
    float: left;
    position: relative;
}

.weather-city{
    font-size: 12px;
}

.local-weather i{
    margin: 0px;
    position: relative;
    top: 3px;
}

.weather-quality{
    color: #61bd82;
    font-weight: 700;
}

.spilt-line{
    float: left;
    width: 1px;
    height: 14px;
    overflow: hidden;
    background: #e7e7e7;
    margin: 5px 20px 0;
    clear: none;
    border: 0;
}

.user-enter{
    float: left;
}

.user-enter a{
    margin-right: 17px;
    text-decoration:none;
    vertical-align: top;
    color: rgba(0,0,0,.75);;
}

.user-enter .change_orange{
    float: left;
}

.change-orange:hover{
    color:orange;
}

.user-enter .change-orange-set{
    margin-right: 17px;
    text-decoration: none;
    vertical-align: top;
    color: rgba(0,0,0,.75);
}

.change-orange-set:hover{
    color:orange;
}

.set-down{
    display: inline-block;
    position: relative;
}

.set-down-class{
    display: none;
    border-width: 1px;
    border-style: ridge;
    position: absolute;
    left: -21px;
    top: 40px;
    opacity: 0;
}

.set-down:hover .set-down-class{
    display: block;
    top: 30px;
    opacity: 1;
}

.set-down-class a{
    display: block;
    text-align: left;
    width: 59px;
    margin: 0px;
    height: 28px;
    padding-left: 11px;
    transition: none .25s;
}

.change-white:hover{
    background: #fd6853;
    color: #fff;
}

.ico-san{
    width: 10px;
    height: 5px;
    position: absolute;
    top: -5px;
    left: 29px;
    background: url(https://www.sogou.com/web/index/images/ico_spy.png) 0 -295px no-repeat;
}

.enter{
    display: inline-block;
    height: 24px;
    background: #fd6853;
    color: #fff;
    padding: 0 10px;
    margin-right: 20px;
}

.enter:hover{
    box-shadow: 0px 0px 5px 0px #fd6853;
    color: #fff;
    background: #f8644f;
}

.content{
    position:relative;
    height: 249.81px;
}

.logo{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -180px;
    text-align: center;
}

.search-box{
    margin: 0 auto;
    height: 44px;
    width: 624px;
    position: relative;
    top: 30px;
}

.search-text{
    width: 499px;
    font-size:18px;
    height: 22px;
    padding: 10px 40px 10px 10px;
}

.search-text:hover{
    border: 1px solid;
}

.search-text:focus{
    border-color:orange;
    outline: none;
    border: 1px solid orange;
}

.click-search{
    position: absolute;
    right: 0px;
    width: 74px;
    height: 46px;
    background: #fd6853 url(https://www.sogou.com/web/index/images/ico_spy.png) 29px -9px no-repeat;
    border: none;
    outline: none;
}

.click-search:hover{
    outline: none;
    background: #ff7967 url(https://www.sogou.com/web/index/images/ico_spy.png) 29px -9px no-repeat;
}

.click-search:active{
    outline: none;
    background: #ef6b59 url(https://www.sogou.com/web/index/images/ico_spy.png) 29px -9px no-repeat;
}

.yuyin{
    width: 24px;
    height: 24px;
    position: absolute;
    top: 11px;
    right: 87px;
    background: url(https://www.sogou.com/web/img/voice/index/ico_fy.png) 5px 1px no-repeat;
}

.footer{
    line-height: 22px;
    text-align: center;
    width: 640px;
    font-size: 12px;
    color: #666;
    position: absolute;
    bottom: 0;
    padding-bottom: 53px;
    left: 50%;
    margin-left: -315px;
}

.erwm-box{
    width: 166px;
    height: 62px;
    padding: 10px 0;
    float: left;
    top: 1px;
    border-right: 1px solid #d3cbcb;
}

.ewm{
    float: left;
    margin-right: 10px;
    width: 62px;
    height: 62px;
    background-image: url(https://www.sogou.com/web/index/images/erweima.png);
    background-repeat: no-repeat;
}

.footer .erwm-box p{
    padding-top: 10px;
    text-align: left;
    line-height: 20px;
    font-weight: 700;
    color: rgba(0,0,0,.7);
    float: left;
    margin: 0px;
}

.footer .erwm-box .p2{
    color: rgba(0,0,0,.5);
    padding: 0px;
    line-height: 20px;
}

.wz-info{
    width: 450px;
    padding-left: 18px;
    text-align: left;
    float: left;
    position: relative;
    top: -4px;
}

.footer .wz-info a{
    text-decoration: none;
    color: rgba(0,0,0,.7);
}

.footer .wz-info a:hover{
    color:black;
}

.footer .wz-info .line{
    width: 1px;
    height: 12px;
    margin: 5px 10px 0px 10px;
    background: #e4e4e4;
    display: inline-block;
    position: relative;
    top: 2px;
}

.footer .wz-info .g{
    color: rgba(0,0,0,.5);
}
</style>

<script>
    function show(span){
        var div= span.getElementsByTagName("div")[0];
        div.style.display = "block";
    }

    function hide(span){
        var div= span.getElementsByTagName("div")[0];
        div.style.display="none";
    }

</script>

<body>
    <div id="header">
        <div id="head-left">
            <a href="https://news.sogou.com/" class="head-left-style">新闻</a>
            <span class="span-style">网页</span>
            <a href="http://weixin.sogou.com/" class="head-left-style">微信</a>
            <a href="http://zhihu.sogou.com/" class="head-left-style">知乎</a>
            <a href="http://pic.sogou.com/" class="head-left-style">图片</a>
            <a href="https://v.sogou.com/" class="head-left-style">视频</a>
            <a href="http://mingyi.sogou.com/?fr=common_index_nav" class="head-left-style">明医</a>
            <a href="http://english.sogou.com/?fr=pcweb_index_nav" class="head-left-style">英文</a>
            <a href="https://wenwen.sogou.com/?ch=websearch" class="head-left-style">问问</a>
            <a href="http://scholar.sogou.com/?fr=common_index_nav" class="head-left-style">学术</a>
            <span class="more-down" onmouseover="show(this)"  onmouseout="hide(this)">
                <a href="http://pic.sogou.com/" class="head-left-style">更多</a>
                <div class="more-down-class">
                    <span class="ico-san"></span>
                    <a href="">地图</a>
                    <a href="">购物</a>
                    <a href="">百科</a>
                    <a href="">知识</a>
                    <a href="">应用</a>
                    <a href="">翻译</a>
                    <a href="">指数</a>
                    <a href="">党建</a>
                    <a href="">全部</a>
                </div>
            </span>
        </div>
        <div id="head-right">
            <div class="local-weather">
                <span class="weather-city">广东 深圳</span>
                <i>
                    <img src="/html_learn_1/duoyun.jpg/"
                    width="16" height="16" title="多云" alt="多云">
                </i>
                <span class="weather-city">23°</span>
                <span class="weather-quality">优 42</span>
            </div>
            <span class="spilt-line"></span>
            <div class="user-enter">
                <div class="change_orange">
                <a href="" class="change-orange">显示卡片</a>
                <a href="" class="change-orange"> 换肤</a>
                <span class="set-down">
                    <a href="" class="change-orange-set">设置</a>
                    <div class="set-down-class">
                        <span class="ico-san"></span>
                        <a href="" class="change-white">搜索设置</a>
                        <a href="" class="change-white">高级搜索</a>
                        <a href="http://help.sogou.com/?w=01091500&v=1" class="change-white" >帮助</a>
                    </div>
                </span>
                </div>
                <span class="enter">登录</span>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="logo">
            <img src="/html_learn_1/sougou.jpg/"
            width="300" height="80">
        </div>
    </div>
    <div class="search-box">
        <input type="text" name="search-text" class="search-text">
        <input type="submit" class="click-search" id="sub" value="" style="cursor:pointer">
        <a href="" class="yuyin" title="语音搜索"></a>
    </div>
    <div class="footer">
        <div class="erwm-box">
            <span class="ewm"></span>
            <p>搜狗搜索APP</p>
            <p class="p2">搜你所想</p>
        </div>
        <div class="wz-info">
            <a href="https://pinyin.sogou.com/" target="_blank">搜狗输入法</a>
            <span class="line"></span>
            <a href="https://ie.sogou.com/" target="_blank">浏览器</a>
            <span class="line"></span>
            <a href="https://123.sogou.com/" target="_blank">网页导航</a><br>
            <a href="http://corp.sogou.com/" target="_blank">关于搜狗</a>
            &nbsp;-&nbsp;
            <a href="http://corp.sogou.com/" target="_blank" class="g">About Sogou</a>
            &nbsp;-&nbsp;
            <a href="http://fuwu.sogou.com/" target="_blank" class="g">企业推广</a>
            &nbsp;-&nbsp;
            <a href="http://www.sogou.com/docs/terms.htm?v=1" target="_blank" class="g">免责声明</a>
            &nbsp;-&nbsp;
            <a href="http://fankui.help.sogou.com/index.php/web/web/index/type/4" target="_blank" class="g">意见反馈及投诉</a>
            &nbsp;-&nbsp;
            <a href="http://corp.sogou.com/private.html" target="_blank" class="g">隐私政策</a><br>
            <span class="g">©&nbsp;2004-2018&nbsp;Sogou.com&nbsp;/&nbsp;京网文&nbsp;(2016)&nbsp;6432-852号&nbsp;/&nbsp;(京)-经营性-2016-0019</span><bf>
            <a href="http://www.miibeian.gov.cn/" target="_blank" class="g">京ICP证050897号</a>
            <span class="g">/</span>
            <a href="http://www.miibeian.gov.cn/" target="_blank" class="g">京ICP备11001839号-1</a>
            <span class="g">/</span>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000025" target="_blank" class="g">京公网安备11000002000025号</a>
        </div>
    </div>
</body>
</html>
L-s
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS 搜狗首页
双子枫叶的博客
07-29 1163
HTML+CSS 搜狗首页展示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 搜狗首页 *{margin:0; padding:0;} #sougou{ width:
搜狗浏览器7.0页面特效下载
06-24
搜狗浏览器7.0的页面特效下载，就是针对这款浏览器的新版本设计的一系列动画效果。这些特效旨在为用户带来更加生动、丰富的视觉体验，同时也彰显了搜狗浏览器在技术创新上的努力。 首先，我们来了解一下"动画效果...
搜狗首页html
m0_63929848的博客
03-09 422
搜狗首页纯html和css
怎么用html制作搜狗网页,sougou_html
weixin_42627853的博客
06-28 420
搜狗壁纸window.onload=function(){varimg=document.createElement("IMG");img.src="http://ping.pinyin.sogou.com/bizhi.gif?type=show&id=0701-7";}functiondownloading(id){varimg=document.createEle...
（12）前端 - HTML - 模拟搜狗
Ricardo__Lu的博客
08-23 184
action里面的地址为：下图？左边 name为：query 运行结果：
用html和css做搜狗网页,搜狗识图的十大用法，你用过几种
weixin_39632698的博客
06-21 664
搜狗识图的十大用法，你用过几种CSS布局HTML小编今天和大家分享美哪种输入法新功能 识图出文字搜狗输入法就可以。 点击输入框弹出搜狗键盘，进入搜狗工具栏的小键盘图标，进入加号添加文字扫描。识图软件有百度识图、搜狗识图、TinEye、360识图、链图云。百度识图 通过图像底层局部特征的比对，百度识图具备寻找相同或近似相同图像的能力，并能根据互联网上存在的相同图片资源猜测用户上传图片的对应文本内容。...
搜狗浏览器7.0页面特效下载.zip
11-26
总结来说，这个压缩包是一个针对搜狗浏览器7.0的前端开发资源集合，主要利用jQuery、HTML5、CSS和JavaScript技术实现各种页面特效，旨在提高网页的互动性和视觉吸引力。对于前端开发者而言，这是一个学习和实践的好...
jquery搜狗浏览器5.0页面特效.zip
11-22
标题中的“jquery搜狗浏览器5.0页面特效.zip”表明这是一个使用jQuery库为搜狗浏览器5.0版本设计的页面特效集合。这个压缩包可能包含了多个HTML、CSS和JavaScript文件，用于展示在搜狗浏览器中运行的各种交互效果和...
CSS学生入学毕业档案表单样式代码.rar_CSS学生入学毕业档案表单样式代码_css学生档案卡_opera
09-20
在IT领域，特别是网页设计和开发中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于定义HTML或XML（包括SVG、MathML等）文档的呈现方式。本主题聚焦于一个具体的实例——"CSS学生入学毕业档案表单样式...
jquery搜狗浏览器5.0页面特效特效代码
03-20
【jQuery页面特效与搜狗浏览器5.0的结合】 在网页设计中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery的强大之处在于其丰富的插件和易用性，使得开发者...
html5实现拼音输入法
08-11
点击标签实现内容传入文本框；输入法的实现；带声调的拼音输入法的实现；html5前端实现；
html js 虚拟键盘带拼音输入法
08-08
html js 虚拟键盘带拼音输入法,豪华界面，Kiosk专用。
HTML5 css3完全仿微信聊天气泡对话框.rar
07-10
HTML5 css3完全仿微信聊天界面的气泡对话框，这里还模拟实现了头像、气泡缺口以及聊天双方的气泡错位等效果，可以说模拟的十分相似了，支持在手机端使用，CSS3技术气泡对话框特效，请看截图所示的效果哦。
搜狗经典风格网址导航源代码
03-16
搜狗经典的网址导航蓝色风格，端正大方，集合常用功能，日期时间、天气预报、邮箱登陆、搜索引擎、实用工具、小游戏等；完全免费。无需维护、零风险、支持任何网页空间、上传即可使用。 温馨提示： 首页和内页LOGO在images/v32目录；(请自行更改) 统计代码在j
仿京东主页Web开发源代码（html+css)）
07-11
对京东主页的效果图进行web网页搭建，这里仅基于HTML和CSS对网页主体结构和样式进行了重现。
html学习
苏不易染的博客
11-17 168
html学习笔记
html5 input的type属性启动输入法
Edward_S
05-11 6238
 当文本框只能输入数字，英文是一个很常见的需求，比如电话号码，身份证号，卡号， 数量....等等只允许数字输入，当输入验证码时会只是用英文字母，为了更好的用户体验性，直接写出 启动数字键盘的需求，可以使用imeMode imeMode有四种形式，分别是： active 代表输入法为中文 inactive 代表输入法为英文 auto 代表打开输入法 (默认) disable 代表
html输入框初始输入法,处理input输入框被输入法遮住
weixin_39623411的博客
06-04 154
.index{/*background: #000000;*/width: 50%;margin:auto;margin-top: 80%;}//处理input输入框被输入法遮住function inputIos(inputBox){var inputF = $(inputBox).find('input');//找到对应的inputif(inputF == document.activeElem...
基于搜狗微信的selenium爬虫
最新发布
zwlalalala的博客
10-23 597
基于搜狗微信的selenium爬虫
[互联网]毕向东HTML_CSS_JavaScript教程笔记.doc
06-11
[互联网]毕向东HTML_CSS_JavaScript教程笔记

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值