Web前端学习：四 - 练习
三九–四一：百度页面制作
1、左右居中：
text-align: center;
2、去掉li默认的状态
list-style: none;
li中有的有点，有的有序，此代码去掉默认状态
3、伪类：hovar
一般显示为color: #0f0e0f，
当鼠标接触时显示color: #071ac8;
.top ul li a{font-size: 12px; color: #0f0e0f;}
.top ul li a:hover{color: #071ac8;}
4：鼠标显示效果
cursor: pointer
效果：鼠标接触此标签时，以类似在标签a中的显示形式一致。改变接触时鼠标样式
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0; padding: 0; list-style: none;}.top{width: 100%; height: 60px;}.top ul{float: right; height: 100%; line-height: 60px; }.top ul li{float: left; margin: 0 10px;}.top ul li a{font-size: 12px; color: #0f0e0f;}.top ul li a:hover{color: #071ac8;}.top .more{width: 60px; height: 24px; line-height: 24px; text-align: center;font-size: 13px; color: white; background: #1076ff;float: right; margin-left: 14px; margin-top: 18px; margin-right: 12px;}.center{width: 640px; height: 168px;margin: 65px auto 0 ; text-align: center;}.center .serch{width: 100% ; height: 36px;margin-top: 16px;}.center .serch .left{width: 539px; height: 34px; float: left;border: 1px solid #3286ff; border-right: none;}.center .serch .right{width: 100px; height: 100%; background: #3286ff;float: left; text-align: center; line-height: 36px; color: white;cursor: pointer; font-size: 15px;}.center .serch .left input{width: 460px ; height: 100% ;float: left; border: none; outline: none; text-indent: 10px;}.center .serch .left .audio{width: 28px; height: 100%;float: left; text-align: center; margin-top:7px;}.center .serch .left .one{width: 1px; height: 14px; background: #191919;float: left;margin-top: 10px;}.center .serch .left .photo{height: 100%; width: 40px;float: left; text-align: center; margin-top: 7px;}.bottom{width: 100%; height: 201px;position: absolute; bottom:0 ; text-align:center; }.bottom .bd{font-size: 12px; color: #545454; display: block;}.bottom ul{height: auto; margin-top: 25px;}.bottom ul li{display: inline; margin: 0 12.5px; height: 12px;}.bottom ul li a{font-size: 12px; color:#91908f;}.bottom .bottomUI{margin-top: 11px;}.bottom .bottomUI li{font-size: 12px; color:#91908f; margin: 0 0px;}.bottom .bottomUI .lasta{margin-right: 22px; background: url(img/l_1.gif) no-repeat 98px;padding-right: 17px;}.bottom .bottomUI .lastb{background: url(img/l_2.gif) no-repeat 170px;padding-right: 17px;}</style></head><body><div class="top"><div class="more">跟多产品</div><ul><li><a href="#"><b>新闻</b></a></li><li><a href="#"><b>hao123</b></a></li><li><a href="#"><b>地图</b></a></li><li><a href="#"><b>视频</b></a></li><li><a href="#"><b>贴吧</b></a></li><li><a href="#"><b>学术</b></a></li><li><a href="#"><b>登录</b></a></li><li><a href="#"><b>设置</b></a></li></ul></div><div class="center"><a href="#"><img src="img/logo.gif"/></a><div class="serch"><div class="left"><input /><div class="audio"><a href="#"><img src="img/y_1.gif"/></a></div><div class="one"></div><div class="photo"><a href="@"><img src="img/y_2.gif"/></a></div></div><div class="right">百度一下</div></div></div><div class="bottom"><img src="img/ewm.gif" /><span class="bd">百度</span><ul ><li><a href="#">把百度设为首页</a></li><li><a href="#">关于百度</a></li><li><a href="#">About Baidu</a></li><li><a href="#">百度推广</a></li></ul><ul class="bottomUI"><li>©2019</li><li>Baidu</li><li><a href="#">使用百度前必读</a></li><li><a href="#">意见反馈</a></li><li class='lasta'>京ICP证030173号</li><li class='lastb'>京公网安备11000002000001号</li></ul></div></body>
</html>
效果：
四二–四八：百度糯米
42–43：头部+输入框
<!DOCTYPE HTML>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0; padding: 0; list-style: none; text-decoration: none;} /*banner start*/.banner{width: 100%; height: 40px; background: #f2f2f2;}.banner .banner_con{width: 1217px; height: 100%; margin: 0 auto;}.banner .banner_con ul{float: left; height: 100%; line-height: 40px;}.banner .banner_con ul li{font-size: 14px; color: #666666; float: left;margin-right: 22px;}.banner .banner_con ul li a{text-decoration: none; color: #666666}.banner .banner_con ul li a .login{color: #a98239;}.banner .rightNode{float: right; height: 100%; line-height: 40px; text-align: center;}.banner .rightNode li{float: left; font-size: 14px; color: #666666; height: 100%;margin-left: 22px;}.banner .rightNode li a{text-decoration: none; color: #828282}.banner .rightNode li .down{background: url(img/s_1.gif) no-repeat 57px center;padding-right: 9px;}.banner .rightNode .line{width: 1px; height: 14px; background: black;margin-top: 14px;}/*banner end*//*topNode start*/.topNode{width: 1218px; height: 111px; margin: 0 auto; }.topNode .logo{float: left; margin-top: 26px;}.topNode .topNode_ln{width: 67px; height: 17px; line-height: 17px;float :left; font-size: 16px;text-indent: 18px; margin: 44px 0 0 40px;background: url(img/left_node.gif) no-repeat left top;}.topNode .topNode_ln a{color: #232324;padding-right: 16px;background:url(img/right_node.gif) no-repeat 36px center;}.topNode .topNode_center{width: 580px; height: 100%; float: left;margin-left: 74px;}.topNode .topNode_center .search{width: 100%; height: 41px; float: left;margin-top: 25px;}.topNode .topNode_center .search .searchleft{width: 467px; height: 39px; float: left;border: 1px solid #dfcca7; border-right: none;}.topNode .topNode_center .search .searchleft .left_two{width: 467px; height: 37px; float: left;border: 1px solid #a97310 ; border-right: none;}.topNode .topNode_center .search .searchleft .left_two input{float: left;width: 454px; height: 35px;border: 1px solid #dfcca7; border-right: none;outline: none;padding-left: 12px;}.topNode .topNode_center .search .searchTo{width: 111px; height:100%; float: left;background: #c9a156; color: white;text-align: center; line-height: 39px;border-top-right-radius: 1px; ;}.topNode .topNode_center .search_ul{float: left; height: 14px; line-height: 14px;margin: 9px 0 0 2px; }.topNode .topNode_center .search_ul li{float: left; }.topNode .topNode_center .search_ul li a{color: #adadad; font-size: 14px; margin-right: 17px;}.topNode .topNode_right{width: 149px; height: 37px; border: 2px solid #f2ebde;float: left; margin: 25px 0 0 12px;background:#fff8eb;}.topNode .topNode_right li{height: 100%; width: 48px;float: left;}.topNode .topNode_right li a{width: 100%; height: 100%; float: left;}.topNode .topNode_right li.t1{width: 49px;}.topNode .topNode_right li.t1 a{background: url(img/t_1.gif) no-repeat center;}.topNode .topNode_right li.t2 a{background: url(img/t_2.gif) no-repeat center;}.topNode .topNode_right li.t3 a{background: url(img/t_3.gif) no-repeat center;}.topNode .topNode_right .line{width: 2px; height: 23px; background: #efe5d1;margin: 7px 0 0 auto;}</style></head><body><div class="banner"><div class="banner_con"><ul><li>Hi！欢迎来到百度糯米</li><li><a href="#" class="login">请登录</a></li><li><a href="#">免费注册</a></li></ul><ol class="rightNode"><li><a href="#">个人中心</a></li><li><a href="#" class="down">最近浏览</a></li><li class="line"></li><li><a href="#" class="down">糯米APP</a></li><li class="line"></li><li><a href="#" class="down">我是商家</a></li><li class="line"></li><li><a href="#">帮助中心</a></li><li><a href="#">食品安全</a></li></ol></div></div><div class="topNode"><a href="#" class="logo"><img src="img/logo.gif"/></a><div class="topNode_ln"><a href="#">北京</a></div><div class="topNode_center"><div class="search"><div class="searchleft"><div class="left_two"><input placeholder="搜索商家/地点" /></div></div><a href="#" class="searchTo">搜索</a></div><ul class="search_ul"><li><a href="#">自助火锅</a></li><li><a href="#">天虹商场</a></li><li><a href="#">中医推拿按摩</a></li><li><a href="#">化妆</a></li><li><a href="#">钢琴培训</a></li></ul></div><ul class="topNode_right"><li class="t1"><a href="#"></a></li><li class="line"></li><li class="t2"><a href="#"></a></li><li class="line"></li><li class="t3"><a href="#"></a></li></ul></div></body>
</html>预览：
相关文章：
Web前端学习：四 - 练习
三九–四一：百度页面制作 1、左右居中： text-align: center; 2、去掉li默认的状态 list-style: none; li中有的有点，有的有序，此代码去掉默认状态 3、伪类：hovar 一般显示为color: #0f0e0f， 当鼠标接触时…...
odoo15 标题栏自定义
odoo15 标题栏自定义 如何显示为自定义呢 效果如下： 代码分析： export class WebClient extends Component {setup() {this.menuService = useService("menu");this.actionService = useService("action");this.title = useService("title&…...
视觉SLAM十四讲 ch3 (三维空间刚体运动)笔记
本讲目标 ●理解三维空间的刚体运动描述方式:旋转矩阵、变换矩阵、四元数和欧拉角。 ●学握Eigen库的矩阵、几何模块使用方法。 旋转矩阵、变换矩阵 向量外积 向量外积（又称叉积或向量积）是一种重要的向量运算，它表示两个向量所形成的平行…...
问题解决：java.net.SocketTimeoutException: Read timed out
简单了解Sockets Sockets：两个计算机应用程序之间逻辑链接的一个端点，是应用程序用来通过网络发送和接收数据的逻辑接口 是IP地址和端口号的组合每个Socket都被分配了一个用于标识服务的特定端口号基于连接的服务使用基于tcp的流Sockets Java为客户端…...
前端代码优化方法
1.封装的css样式，增加样式复用性。如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢 2.减少css嵌套，最好不要嵌套三层以上 3.不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完…...
【批处理脚本】-1.16-文件内字符串查找增强命令findstr
"><--点击返回「批处理BAT从入门到精通」总目录--> 共9页精讲（列举了所有findstr的用法，图文并茂，通俗易懂） 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中，经常会在其集成开发环境IDE（CodeWarrior，S32K DS，Davinci，EB Tresos，ETAS…）中…...
三天吃透Redis面试八股文
本文已经收录到Github仓库，该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点，欢迎star~ Github地址：https://github.com/…...
数据湖架构Hudi（三）Hudi核心概念
三、Apache Hudi核心概念 3.1 基本概念 Hudi 提供了Hudi 表的概念， 这些表支持CRUD操作， 可以利用现有的大数据集群比如HDFS做数据文件存储， 然后使用SparkSQL或Hive等分析引擎进行数据分析查询。 Hudi表的三个主要组件： 有序的…...
在数字优先的世界中打击知识产权盗窃
在当今数据驱动的世界中，全球许多组织所面临的期望和需求正在达到前所未有的水平。 为了迎接挑战，数据驱动的方法是必要的，需要有效的数字化转型来提高运营效率、简化流程并从遗留技术中获得更多收益。 但是，虽然数字优先方法可…...
机器学习算法原理——逻辑斯谛回归
文章目录逻辑斯谛回归二项逻辑斯谛回归模型极大似然估计多项逻辑斯谛回归模型总结归纳逻辑斯谛回归 写在前面：逻辑斯谛回归最初是数学家 Verhulst 用来研究人口增长是所发现的，是一个非常有趣的发现过程， b 站有更详细的背景及过程推导&…...
【华为OD机试 】最优资源分配/芯片资源占用（C++ Java JavaScript Python）
文章目录 题目描述输入描述输出描述备注用例题目解析C++JavaScriptJavaPython题目描述 某块业务芯片最小容量单位为1.25G，总容量为M*1.25G，对该芯片资源编号为1，2，…，M。该芯片支持3种不同的配置，分别为A、B、C。 配置A：占用容量为 1.25 * 1 = 1.25G配置B：占用容量为 …...
600 条最强 Linux 命令总结
1、基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 （SMBIOS / DMI） hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器…...
python自学之《21天学通Python》(15)——第18章 数据结构基础
数据结构是用来描述一种或多种数据元素之间的特定关系，算法是程序设计中对数据操作的描述，数据结构和算法组成了程序。对于简单的任务，只要使用编程语言提供的基本数据类型就足够了。而对于较复杂的任务，就需要使用比基本的数据类…...
从功能到自动化，熬夜3天整理出这一份2000字学习指南~
学习自动化这个想法，其实自己在心里已经琢磨了很久，就是一直没付诸实践，觉得现在手工测试已经能满足当前的工作需要，不想浪费时间去学习新的东西，有点时间还不如刷刷视频、看看小说等。 第一次有学习Selenium的冲动是…...
客户端攻击（溯源攻击，获取客户端信息）
目录 背景 为什么 示例 探索HTML应用程序 HTA攻击行为（Powershell代码） 背景 如果创建的文件扩展名为.hta而不是.html，Internet Explorer将自动将其解释为html应用程序，并提供使...
visual studio 2022 社区版 c# 环境搭建及安装使用【图文解析-小白版】
visual studio 2022 社区版 c# 环境搭建及安装使用【图文解析-小白版】visual studio 安装 C# 环境安装流程创建c#窗体应用程序visual studio 安装 C# 环境 首先，进入其官网下载对应的visual studio社区版本，官网链接: https://visualstudio.microsoft…...
21- 神经网络模型_超参数搜索 (TensorFlow系列) (深度学习)
知识要点 fetch_california_housing：加利福尼亚的房价数据，总计20640个样本，每个样本8个属性表示，以及房价作为target 超参数搜索的方式: 网格搜索, 随机搜索, 遗传算法搜索, 启发式搜索 超参数训练后用： gv.estimat…...
《NFL橄榄球》：芝加哥熊·橄榄1号位
芝加哥熊（英语：Chicago Bears）是一支职业美式橄榄球球队。位于伊利诺伊州的芝加哥。现时为全国橄榄球联盟的国家联盟北区的球队。他们曾经赢出九次美式橄榄球比赛的冠军，分别为八次旧制全国橄榄球联盟和一次超级碗冠军（…...
【ES】Elasticsearch核心基础概念：文档与索引
es的核心概念主要是：index(索引)、Document(文档)、Clusters(集群)、Node(节点)与实例，下面我们先来了解一下Document与Index。 RESTful APIs 在讲解Document与Index概念之前，我们先来了解一下RESTful APIs，因为下面讲解Documen…...
实时手势识别(C++与python都可实现)
一、前提配置： Windows，visual studio 2019，opencv，python10，opencv-python，numpy，tensorflow，mediapipe，math 1.安装python环境 这里我个人使用的安装python10&#…...
15个Spring扩展点，一般人知道的不超过5个！
Spring的核心思想就是容器，当容器refresh的时候，外部看上去风平浪静，其实内部则是一片惊涛骇浪，汪洋一片。Spring Boot更是封装了Spring，遵循约定大于配置，加上自动装配的机制。很多时候我们只要引用了一个…...
Elasticsearch：以 “Painless” 方式保护你的映射
Elasticsearch 是一个很棒的工具，可以从各种来源收集日志和指标。 它为我们提供了许多默认处理，以便提供最佳用户体验。 但是，在某些情况下，默认处理可能不是最佳的（尤其是在生产环境中）； 因此&…...
js几种对象创建方式
适用于不确定对象内部数据方式一：var p new Object(); p.name TOM; p.age 12 p.setName function(name) {this.name name; }// 测试 p.setName(jack) console.log(p.name,p.age)方式二： 对象字面量模式套路：使用{}创建对象，同…...
阿里云服务器ECS适用于哪些应用场景？
云服务器ECS具有广泛的应用场景，既可以作为Web服务器或者应用服务器单独使用，又可以与其他阿里云服务集成提供丰富的解决方案。 云服务器ECS的典型应用场景包括但不限于本文描述，您可以在使用云服务器ECS的同时发现云计算带来的技术红利。 阿…...
Ajax学习笔记01
引入 翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点…...
Jinja2----------过滤器的使用、控制语句
目录 1.过滤器的使用 1.过滤器和测试器 2.过滤器 templates/filter.html app.py 效果 3.自定义过滤器 app.py templates/filter.html 效果 2.控制语句 1.if app.py templates/control.html 2.for app.py templates/control.htm 1.过滤器的使用 1.过滤器和测…...
面试了1个自动化测试，开口40W年薪，只能说痴人做梦...
公司前段缺人，也面了不少测试，结果竟然没有一个合适的。一开始瞄准的就是中级的水准，也没指望来大牛，提供的薪资在10-20k，面试的人很多，但平均水平很让人失望。看简历很多都是3年工作经验，但面试…...
冲鸭！33% 程序员月薪达到 5 万元以上~
2023年，随着互联网产业的蓬勃发展，程序员作为一个自带“高薪多金”标签的热门群体，被越来越多的人所关注。在过去充满未知的一年中，他们的职场现状发生了一定的改变。那么，程序员岗位的整体薪资水平、婚恋现状、职业方…...
【RSA】HTTPS中SSL/TLS握手时RSA前后端加密流程
SSL/TLS层的位置 SSL/TLS层在网络模型的位置，它属于应用层协议。接管应用层的数据加解密，并通过网络层发送给对方。 SSL/TLS协议分握手协议和记录协议，握手协议用来协商会话参数（比如会话密钥、应用层协议等等）&…...
clion在linux设置桌面启动图标（jetbrains全家桶均适用）
clion在linux设置桌面启动图标（jetbrains全家桶均适用） 网上大部分步骤都只是pycharm的教程，其实对于jetbrains全家桶都适合，vs code编辑器也可以这样。 刚开始是使用pycharm在linux设置的教程，参照：http…...
做网站制作/互联网销售包括哪些
原标题：文件上传限制绕过技巧严正声明：本文仅限于技术讨论，严禁用于其他用途。简介文件上传漏洞是web安全中经常利用到的一种漏洞形式。一些web应用程序中允许上传图片，文本或者其他资源到指定的位置，文件上传漏洞就是…...
北京网站建设联系电话/营销方式都有哪些
报数序列是一个整数序列，按照其中的整数的顺序进行报数，得到下一个数。其前五项如下： 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1" ("一个一") , 即 11。11 被读作 "two 1s" (&…...
福建住房与城乡建设部网站/seo需要什么技术
Python的特点如下： Python 是一种解释型，交互式，面向对象的高级编程语言。和别的一些使用标点符号的语言不同，Python使用了大量的英语单词作为关键字，因而具有很好的可读性。而且跟其他编程语言相比，它有更…...
福州建设网站的公司/宣传平台有哪些
在IE6常见的断头程序和Peek-a-boo错误中，令人耳目一新的是，它仍然具有向您抛出真正独特和创意的功能。 这是我们今天上午在SitePoint封面上找到的一个新错误。 我知道的任何形式的功能文章的XHTML都不是特别出色： – DIV＃feature设…...
网站软文写作要求/淘宝关键词搜索量查询
2019独角兽企业重金招聘Python工程师标准>>> 1.介绍 是一款桌面录像很好的软件 下载地址：http://yunpan.cn/cZE53uszCyvhb 访问密码 cb90 2.安装 2.1.点击屏幕录像专家.exe 2.2.按照说明点击下一步，其中遇到这个界面注意按照勾选 2.3.…...
wordpress跳过短代码/广州市口碑seo推广外包
有时需引入外部字体，字体文件过大，页面加载很慢，故使用此方法压缩。 安装 npm install font-spider -g 使用 新建【font】目录，html文件，将项目里需要压缩的文字写入html；将字体文件放入目录࿱…...