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&#…...
华为NPU上跑大模型？手把手教你用vLLM-Ascend插件部署Qwen2
华为NPU实战：基于vLLM-Ascend插件的高效大模型部署指南 1. 环境准备与基础配置 在华为Ascend NPU上部署大模型，首先需要确保硬件和软件环境满足基本要求。Atlas 800I A2或Atlas A2 Training系列设备是当前官方推荐的选择，操作系统需为Linux发…...
3个让Mac窗口管理效率倍增的秘密武器：AltTab深度解析
3个让Mac窗口管理效率倍增的秘密武器：AltTab深度解析 【免费下载链接】alt-tab-macos Windows alt-tab on macOS 项目地址: https://gitcode.com/gh_mirrors/al/alt-tab-macos 作为一名从Windows转战macOS的开发者，你是否也曾为窗口切换效率低下…...
2026指纹浏览器风控对抗技术实践：从特征伪装到行为合规的全流程落地
一、引言：多账号运营场景下的风控挑战与技术诉求随着 2026 年全球互联网平台风控技术的持续迭代，AI 驱动的多维度交叉验证已成为主流风控模式，平台不仅对设备硬件指纹、网络环境进行深度检测，更将操作行为、业务数据、行为轨迹纳入…...
Path of Building：离线构筑规划工具的全方位解析
Path of Building：离线构筑规划工具的全方位解析 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/gh_mirrors/pat/PathOfBuilding 定位核心价值：构筑决策的数字沙盘 Path of Building…...
从4.69万亿Token看中国AI大模型：调用量超越美国的背后逻辑
前言最近看到一组数据：截至2026年3月15日，中国AI大模型的周调用量达到4.69万亿Token，连续第二周超越美国，全球前三全部被中国模型包揽。作为一个长期关注AI行业的技术人，这个消息让我想深入挖一挖背后的逻辑࿱…...
告别Delay！用STM32硬件定时器实现非阻塞软件IIC，实测F429/H743性能对比
告别Delay！用STM32硬件定时器实现非阻塞软件IIC，实测F429/H743性能对比 在嵌入式开发中，IIC总线因其简单的两线制设计和广泛的外设支持，成为连接各类传感器的首选方案。然而，当MCU缺乏硬件IIC外设或引脚被占用时&#…...
小白程序员快看！轻松入门大模型驱动的AI Agent，收藏这份超全学习指南！
本文以通俗易懂的语言介绍了AI Agent的概念、构成、分类及工作流程，并与传统软件进行了对比，阐述了AI Agent的核心优势。同时，文章还列举了AI Agent的常见应用场景，并推荐了5个适合新手使用的开发工具，最后通过一个实际…...
3分钟让静态图像“活“起来：AI肖像动画技术全解析
3分钟让静态图像"活"起来：AI肖像动画技术全解析 【免费下载链接】LivePortrait Bring portraits to life! 项目地址: https://gitcode.com/GitHub_Trending/li/LivePortrait 静态图像如何突破二维平面的限制，展现动态生命力？…...
解决WSL2和Hyper-V网络冲突：最新镜像模式+防火墙配置指南
解决WSL2与Hyper-V网络冲突的终极方案：镜像模式与防火墙深度配置 在Windows系统上同时运行WSL2和Hyper-V虚拟机时，网络冲突问题几乎成为每个开发者的必经之路。想象一下这样的场景：当你正在调试一个分布式系统，WSL2中的微服务需要…...
Python金融数据工程：构建高可靠股票数据管道的3种架构方案
Python金融数据工程：构建高可靠股票数据管道的3种架构方案 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在量化投资和金融数据分析领域，获取稳定、实时的股票数据是每个技…...