搜狗首页html

最新推荐文章于 2024-03-25 22:00:13 发布
最新推荐文章于 2024-03-25 22:00:13 发布
阅读量473 收藏 1
点赞数 1
分类专栏： HTML5和CSS 文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63929848/article/details/129427603
版权

提示：html和css知识

文章目录

关于c v工程师的特点：能自己打代码。看清网页逻辑

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、搜狗html index

二、使用步骤

1.c v

代码如下（示例）：

 

<!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">
    <title>搜狗输入法-首页</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- heade  开始-->
    <div class="header">
        <div>
            <ul>
                <li>输入法手机版</li>
                <li>|</li>
                <li>输入法Mac版</li>
                <li>|</li>
                <li>输入法企业版</li>
                <li>|</li>
                <li>输入法Linux版</li>
                <li>|</li>
                <li>五笔输入法</li>
                <li>|</li>
                <li>输入法开放平台</li>
             
          
            </ul>

            <ul>
                <li>登入</li>
                <li>|</li>
                <li>注册</li>
            </ul>
        </div>

    </div>
    <!-- heade结束 -->
 
    <!-- logo 开始 -->
    <div class="logo">
     <a href="#"></a>
     <!-- a是行级标签 -->
     <div>&nbsp;&nbsp;找皮肤...</div>
    </div>
    <!-- logo结束 -->
    <!-- nav开始 -->
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>皮肤</li>
            <li>词库</li>
            <li>皮肤表情开放平台
                <!-- <img src="images/10113.png" alt=""> -->
            </li>
            <li>帮助</li>
            <li>升级日志</li>
        </ul>

    </div>

    <!-- nav结束 -->

    <!-- banner 开始 -->
    <div class="banner">
        <div>
            <div>
                <div><p>更新日期 : 2023-03-07新版特性</p>
                <p>支持：XP / WIN7 / WIN8 / WIN10</p>
                <img src="images/xia.png" alt="">
            </div>
                <div>
                    <img src="images/er.png" alt="">
                    <img src="images/down.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- banner结束 -->

    <!-- skin 开始 -->

    <div class="skin">
        <div class="skin_left">
            <div></div>

            <ul class="skinList">
                <li>
                    <img src="images/1.jpg" alt="">
                   <a href="#"></a>
                   <span>相濡以沫-心痛到无法呼吸</span>
                </li>
                <li> 
                       <img src="images/2.gif" alt="">
                    <a href="#"></a>
                    <span>野萌君·哈哈哈</span>
                </li>
                <li>
                    <img src="images/3.png" alt="">
                    <a href="#"></a>
                    <span>种星星的人</span>
                </li>
                <li>
                    <img src="images/4.png" alt="">
                    <a href="#"></a>
                    <span>瓶子里の精灵</span>
                </li>
                <li>
                    <img src="images/5.png" alt="">
                    <a href="#"></a>
                    <span>尖叫鸡</span>
                </li>
                <li>
                    <img src="images/6.png" alt="">
                    <a href="#"></a>
                    <span>阿肥宅</span>
                </li>
            </ul>
            <div></div>
            <!-- 词汇推荐开始 -->
              <ul class="extend">
              <li>
                <a href="#"><img src="./images/dictrec_1modao.jpg" alt=""></a>
               <p>魔道祖师</p>
            
              </li>

              <li>
                <a href=""><img src="./images/dictrec_1dacaiwu.gif" alt=""></a>
               <p>财务专用</p>
            
              </li>
              <li>
                <a href=""><img src="./images/dictrec_1jiada.jpg" alt=""></a>
               <p>贾平凹作品</p>
            
              </li>
              <li>
                <a href=""><img src="./images/dictrec_1daf.jpg" alt=""></a>
               <p>TFboys粉丝专用</p>
            
              </li>
              <li>
                <a href=""><img src="./images/dictrec_1douluoda.jpg" alt=""></a>
               <p>斗罗大陆</p>
            
              </li>
              <li>
                <a href=""><img src="./images/dictrec_1dai.jpg" alt=""></a>
               <p>红楼梦</p>
            
              </li>
             </ul>
    <!-- 词汇推荐结束 -->
   
            <div></div>
            <div></div>

        </div>

        <div class="skin_right">
            <div class="ads">
                <img src="./images/barrier_free_banner.png" alt="" width="266px" height="185px">
            </div>

            <div class="add">
                <img src="./images/hhh.jpg" alt="" width="266px" height="244px">
            </div>
            <div class="adc">
                <img src="./images/focus_ewn.png" alt="" width="266px" height="150px">
            </div>
            <div class="adz">
                <img src="./images/23.png" alt="" width="300px" height="186px">
            </div>

        </div>

    </div>
    <!-- skin结束 -->

    <!-- extend拓展功能开始 -->
    <!-- 结束 -->
    <!-- 词汇推荐开始 -->

    <div class="pp">

        <p><span><img src="./images/wei.png" alt=""></span>皮肤表情词库合作、品牌合作、输入法合作 邮箱：hci_bd@tencent.com</p>
        <p><span><img src="./images/wei.png" alt=""></span>使用问题用户反馈 邮箱：IMETS@tencent.com</p>
        <p>© 2023 SOGOU.COM 京ICP备11001839号-1 免责声明 隐私政策</p>
        <P>北京搜狗科技发展有限公司</P>
        <P>联系地址：北京市海淀区中关村东路1号院9号楼搜狐网络大厦9层01房间</P>
        <p>产品介绍：AI语音专家，让您的打字更简洁，更智能</p>
    </div>

</body>
</html>



//css部分

*{
    margin: 0;
    padding: 0;
}
.header{
    width:100%;
    height:30px;
    background-color: #f8f8f8;
    border: 1px solid gainsboro;
}
.header>div{
    width:1000px;
    height:30px;
    /* outline:1px solid red; */
    margin: 0 auto;
    display: flex;
}
.header>div>ul:nth-child(1){
    width:800px;
    height:30px;
    line-height: 30px;
    list-style: none;
    display: flex;
    justify-content: start;
    font-size: 7px;
    color: #7a7a7a;
    font-family: '宋体';
}
.header>div>ul:nth-child(1)>li{
    margin-left: 20px;
    
}
.header>div>ul:nth-child(2){
    width:200px;
    height:30px;
    line-height: 30px;
    color: #7a7a7a;
    list-style: none;
    display: flex;
    justify-content: end;
    font-size: 7px;
    font-family: '宋体';
}
.header>div>ul:nth-child(2)>li{
    margin-left: 20px;
}
li:hover{
    color:#f50;
    cursor: pointer;


}

.logo{
    width:1000px;
    height:70px;
    /* outline: 1px solid red; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 弹性布局  默认排列方式在同一行显示
    center 水平垂直对齐，
    */

}
.logo>a{
    display: block;
    width: 193px;
    height:40px;
    background: url("../images/logo.png") no-repeat;
}
.logo>div{
 
    width: 325px;
    height:32px;
    line-height: 32px;
    font-size: 14px;

    background: url("../images/search_box.png") no-repeat;
}

.nav{
    width:100%;
    height:35px;
    background-color: #fc6b2d;


}
.nav>ul{
    list-style: none;
    width:1000px;
    height:35px;
    margin: 0 auto;
    display: flex;
    align-items: center;

}
.nav>ul>img{
    position: absolute;
    right:25px ;
    top: -15px;
}
.nav>ul>li{
    height:35px;
    line-height: 35px;
    width: 78px;
    text-align: center;
    color:#fff;
    margin-right: 30px;
    font-size: 18px;


    

}
.nav>ul>li:hover{
    height:35px;
    line-height: 35px;
    width: 78px;
    text-align: center;
    color:#fff;
    background-color: #e94f0d;
    cursor: pointer;
    /* 鼠标变成手 */
    /* 
    用  &:nth-child(){

    }
    */

    

}
.nav>ul>li:nth-child(1){
    height:35px;
    line-height: 35px;
    width: 78px;
    text-align: center;
    background-color: #e94f0d;

    

}
.nav>ul>li:nth-child(4){
    height:35px;
    line-height: 35px;
    width: 186px;
    text-align: center;
    /* background-color: #e94f0d; */
    position: relative;

    

}
.nav>ul>li:last-child{
    height:35px;
    line-height: 35px;
    width: 114px;
    text-align: center;
    /* background-color: #e94f0d; */

    

}

.banner{
    width:100%;
    height:400px;
    background:url(../images/bac.png) no-repeat center center #f9533f ;
}
.banner>div{
    width:1000px;
    height: 400px;
    margin: 0 auto;
    /* border:1px solid red; */
    position: relative;
}
.banner>div>div{
    position: absolute;
    right:0;
    bottom:48px;
    width: 368px;
    height:115px;
    /* background-color: skyblue; */
    display: flex;
}
.banner>div>div>div:nth-child(1){
  /* border :1px solid red; */
 
    width:292px;
    float: left;
    height:120px;
}
.banner>div>div>div:nth-child(2){
    /* border :1px solid red;
    */
      width:80px;
      float: right;
      margin-right: 20px;
  }
.banner>div>div>div:nth-child(1)>p{
    opacity: 0.8;
    color: 27364D;
    font-size: 13px;
    font-family: '微软雅黑','Arial';
    width:240px;
    margin-bottom: 10px;
}

.skin{
    width:1000px;
    height:900px;
    /* outline: 1px solid red; */
    margin: 0 auto;
}
.skin>.skin_left{
    width:730px;
    height:760px;
   
    float: left;
}
.skin_left>div:nth-child(1){
    width: 710px;
    height:30px;
    background: url(../images/skin.png) no-repeat;
}
.skin_left>.skinList{
    width: 730px;
    height:500px;
    /* outline: 1px solid blue; */
    list-style: none;

}
.skin_left>.skinList>li{
    width:333px;
    height:157px;
    background: url(../images/skin_border.png) no-repeat;
    /* margin-left: 20px; */
    margin-top: 10px;
    float: left;
    position: relative;
    text-align: center;



}
.skin_left>.skinList>li>img{
    margin-top: 8px;

}
.skin_left>.skinList>li:nth-child(2n){
    margin-left: 20px;
}
.skin_left>.skinList>li>a{
    display: block;
    width:72px;
    height:27px;
    /* background-color: rebeccapurple; */
    position: absolute;
    right: 0;
    bottom: 0;

}
.skin_left>.skinList>li>a:hover{
    background: url(../images/skin_download_hover.png) no-repeat;
}
.skin_left>.skinList>li>span{
    font-size: 12px;
    position: absolute;
    left:5px;
    bottom:10px;
}

.skin_left>div:nth-of-type(2){
    width: 710px;
    height:30px;
    background: url(../images/title2.png) no-repeat;
    margin-top: 25px;
}

.skin_left>div>.extend{
    width: 730px;
    height: 130px;
    margin-top: 14px;
  
 

}
.skin_left>.extend>li{
  list-style: none;
  width:90px;
  text-align: center;

float: left;
padding: 15px;

}
.skin_left>.extend>li>a:nth-child(1){
    display: block;
    width: 90px;
    height:90px;
    margin-left: 5px;
    /* background: url(../images/dictrec_1modao.jpg); */
}
.skin_left>.extend>li>p{
    width: 76px;
    height: 23px;
    margin: 10 0 0 7px;
    font-size: 12px;
    color:#7a7a7a;
    list-style: none;
    
    
}
.skin_left>.extend>li>p:hover{
color: #f9533f;
cursor: pointer;
}


.skin>.skin_right{
    width:266px;
    height:856px;
    /* outline: 1px solid green; */
    float: right;
}
.skin>.skin_right>.ads{
    width:266px;
    height: 185px;
    /* background: url(../images/barrier_free_banner.png) no-repeat; */
    margin-top: 30px;

}
.skin>.skin_right>.add{
    width:266px;
    height: 244px;
    /* background: url(../images/barrier_free_banner.png) no-repeat; */
    margin-top: 30px;

}
.skin>.skin_right>.adc{
    width:266px;
    height: 150px;
    /* background: url(../images/barrier_free_banner.png) no-repeat; */
    margin-top: 30px;

}
.skin>.skin_right>.adz{
    width:266px;
    height:186px;
    /* background: url(../images/barrier_free_banner.png) no-repeat; */
    margin-top: 10px;

}
.pp{
    width:1000px;
    height:330px;
    text-align: center;
    margin: 0 auto ;
    color: #666666;
    height: 260px;
    background: #f5f5f5;
    width: 100%;
    border: 0;
}
.pp>p{
    margin-top: 20px;
}
.pp>p:hover{
    color:#fc6b2d;
    cursor: pointer;
}

2.图片官网检查自取

总结

同志还需努力...

小彭爱软件
关注
专栏目录
基于Python和HTML的搜狗微信搜索微信公众号爬虫设计源码
10-01
该项目是一款基于Python和HTML的搜狗微信搜索微信公众号爬虫设计源码，包含56个文件，涵盖21个Python脚本、10个HTML文件、7个PNG图片、3个Markdown文件、2个YAML和2个ReStructuredText文件，以及一些必要配置和授权...
HTML+CSS 搜狗首页
双子枫叶的博客
07-29 1202
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:
html_css完成搜狗页面
weixin_43338256的博客
10-27 2738
html_css学习记录（搜狗页面） html与css html是超文本标记语言，超文本的意思是它的页面可以包含图片，链接，音乐和程序等非文字元素。主要特点是使用标记来描述网页。 css则是一般与选择器配合使用来设置样式，从而使得网页更加美观。 类选择器与id选择器 类选择器为:class=""，id选择器为:id=""。他们都可以设置样式，而最根本区别是类选择器可以多次出现，而id选择器只可...
html学习
苏不易染的博客
11-17 201
html学习笔记
搜狗输入html,搜狗输入法：回家的路
weixin_42157166的博客
06-08 183
1.创意定位这是搜狗输入法制作的有关春运时火车站的h5，用户通过观看，感受“我回家了”这一主题，以此引起大家对回家的共鸣，扩大宣传。2.策划逻辑作品有4个环节①点击检票上车，进入进站口②向下滑动，以俯瞰的角度，从进站口开始，记录了买票、安检、检票、等车、上车，等待车开的过程，可以看到不同人的状态③开车后，画面速度与车速同步加快，直到下车④下车后检票出站，准备回家，出现宣传语和“传递回家的喜悦”“我...
怎么用html制作搜狗网页,sougou_html
weixin_42627853的博客
06-28 460
搜狗壁纸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...
基于Python和HTML的搜狗微信搜索微信公众号爬虫接口设计源码
最新发布
10-05
本项目为基于Python和HTML技术的搜狗微信搜索微信公众号爬虫接口设计源码，包含56个文件，包括21个Python脚本、10个HTML页面、7个PNG图片、3个Markdown文档、2个YAML配置文件、2个reStructuredText文件、2个JPG图片...
四合一图床html源码，支持百度/新浪/360/搜狗图床
03-21
【标题】中的“四合一图床html源码”指的是一个HTML源代码文件，它整合了四种不同的图床服务，即百度、新浪、360和搜狗的图床功能。图床是网络上用于存储和托管图片的服务，使得用户可以在网页上快速、稳定地展示...
搜狗收录提交-批量搜狗收录提交
02-16
【标题】"搜狗收录提交-批量搜狗收录提交"主要涉及的是搜索引擎优化（SEO）中的一个重要环节，即如何让网站或网页在搜狗搜索引擎中被有效收录。在这个过程中，通常需要通过特定的方式向搜狗提交网站链接，以便其爬虫...
将搜狗浏览器导出的html书签导入safari
w263044840的专栏
04-24 3381
方法其实很简单，就是保证格式，我用搜狗浏览器导出的html每一行都是没有空格的，但是用safari导出的却有 举例如下，title等空一个tab，dt行空一个tab <!-- This is an automatically generated file. It will be read and overwritten. Do Not Edit! --> Bookmarks Bookma
html快速输入法
空之境界
03-24 1318
Emmet的html语法 所有操作按下“tab”键即可瞬间完成 !+tab或者html:5 生成html5文档的初始结构 html:xt 生成html4过渡型 html:4s 生成html4严格型） 元素 1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。 2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基...
搜狗浏览器怎么打开html文件在哪里,搜狗浏览器的文件菜单打开文件在哪
weixin_42179184的博客
06-10 1309
切换不同浏览器内核模式方法一：将鼠标悬停在地址栏右边的闪电图标上(高速模式)，此时会有提示：当前为高速模式，点击切换为兼容模式。切换不同浏览器内核模式方法二：点击右上方的菜单栏(如果没有右键点击勾选菜单栏即可)→工具→切换到兼容模式(地址栏右侧的IE浏览器图标为兼容模式)。注意：在切换之前，一定要先保存好原有的编辑页面，比如打开百度经验草稿纸，切换浏览内核模式之后，原有的文稿内容就会丢失(如没提前...
html搜狗搜索代码,搜狗搜索引擎代码－－５种简单样式
weixin_39796149的博客
06-04 1546
marginheight=0frameborder=0bordercolor='#000000' scrolling=nosrc='http://fragment.union.sogou.com/preview.php?pid=fcok&pagetype=1&bc=%23FFFFFF&fc=&bb=0&bbc=%23000000&width=468...
1-1 爬取搜狗搜索首页的页面源代码
ungoing的博客
04-10 628
import requests if __name__ == "__main__": # 1. 指定url： url = "http://sogou.com/" # 2. 发起请求： resp = requests.get(url=url) resp.encoding = "utf-8" # 3. 获取响应数据：.text返回的是字符串形式的响应数据 html = resp.text # 4. 持久化存储数据： with open(
用html制作搜狗搜索,详解基于搜狗搜索开发的微信公众号的爬虫系统（C#）
weixin_39888807的博客
06-05 311
/// /// 指定header参数的HTTP Get方法/// /// /// /// respondsepublic string Get(WebHeaderCollection headers, string url ,string responseEncoding="UTF-8",bool isUseCookie = false){string responseText = "";try{...
搜狗输入法
qq_40055200的博客
03-25 446
这些在线皮肤通常存储在搜狗服务器上，用户在选择并下载后，软件会将在线皮肤文件下载到本地存储，并在用户下次使用时直接加载本地文件，而不是再次向服务器请求。总的来说，搜狗输入法的前端语音转文字功能借助了浏览器的 WebRTC 技术和后端的语音识别服务，通过将用户的语音输入转换为文本，实现了便捷的语音输入功能。当用户选择预加载的皮肤时，软件会直接从本地读取相应的皮肤文件，并应用到输入法界面上，这样可以减少对服务器的请求，提高皮肤切换的速度和稳定性。用户界面设置：提供用户界面，用户选择不同的皮肤。
html:text 输入法
11-04 145
html:text强制关闭输入法 限定只能输入英文或数字 <html:text property="input"style="ime-mode:disabled" /> 转载于:https://www.cnblogs.com/leo_chow/archive/2008/11/04/1326740.html...
项目慢病基本知识整理
alenejinping的专栏
08-13 555
ime-mode:Disabled-------------不允许调用输入法
HTML5入门与特性解析
国内的Maxthon、360浏览器、搜狗浏览器、QQ浏览器和猎豹浏览器等，基于IE或Chromium的浏览器也具有良好的HTML5兼容性。 HTML5规范的制定是一个开放的过程，涉及众多行业巨头和组织的合作，这确保了HTML5成为一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值