CSS学习13--学成网例子

news2024/11/26 0:41:38

CSS例子

学成网
需要使用的图片:
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
代码:

<html>
	<head>
		<style>
		/*CSS初始化*/
		* { /*清除内外边框*/
			padding: 0;
			margin: 0;
		}
		ul {
			list-style: none; /*清除列表样式*/
		}
		.clearfix:before,.clearfix:after { /*清除浮动*/
			content: ""; 
			display: table; 
		}
		.clearfix::after {
			clear: both;
		}
		.clearfix { 
			zoom: 1;
		}
		a {
			text-decoration: none;
		}
		input {
			border: 0; /*所有表单边框为0*/
			box-sizing: border-box; /*border和padding包含到盒子里*/
		}
		.contanier { /*因为样式相同,事先声明*/
			width: 1500px;
			margin: 0 auto;
		}
		/*css初始化结束*/
		body {
			background-color: #f3f5f7; /*页面背景色*/
		}
		header { /*页面头部*/
			height: 100px;
			overflow: hidden; /*防止外边距合并*/
		}
		nav {
			width: 2000px;
			height: 42px;
			margin: 26px auto 0;
		}
		.logo{
			float: left;
		}
		.navbar {
			height: 42px;
			line-height: 42px; /*行高等于高,垂直居中*/
			float: left;
			margin-left: 52px;
		}
		.navbar li {
			float: left;
		}
		.navbar li a {
			color: #666;
			padding: 0 9px;
			display: block;
			height: 42px;
		}
		.navbar li a:hover {
			border-bottom: 2px solid skyblue;
		}
		.search {
			width: 410px;
			height: 40px;
			border: 1px solid #00a4ff;
			float: right;
		}
		.search input[type=text] { /*属性选择器 type为text的文本框*/
			width: 360px;
			height: 40px;
			padding-left: 20px;
			float: left;
		}
		.search input[type=submit] {
			width: 50px;
			height: 40px;
			float: left;
			background: #00a4ff url(images/search.png) center center no-repeat;
		}
		.personal {
			float: right;
			height: 42px;
			line-height: 42px;
			margin: 0 15px 0 35px;
		}
		.personal a {
			color: #666;
		}
		.personal img {
			margin: 0 10px;
		}
		/*banner部分*/
		.banner {
			height: 420px;
			background-color: #1c036c;
		}
		.banner-in {
			height: 420px;
			background: url(images/pic1.png) center center no-repeat;
		}
		.sliderbar {
			height: 420px;
			width: 190px;
			background: rgba(0,0,0,0.3); /*盒子背景半透明*/
			float: left;
		}
		.sliderbar li a {
			font-size: 16px;
			color: white;
			padding: 0 20px;
			display: block;
			height: 45px;
			line-height: 45px; /*单行垂直居中有了行高可以不用给高度*/
		}
		.sliderbar li a span {
			float: right;
			font-family: Arial, Helvetica, sans-serif;
		}
		.sliderbar li a:hover {
			color: #00a4ff;
		}
		.timetable {
			width: 230px;
			height: 300px;
			margin-top: 50px ;
			background-color: #fff;
			float: right;
		}
		.timetable dt {
			height: 50px;
			background-color: #00a4ff;
			text-align: center;
			line-height: 50px;
			color: white;
			font-weight: 700; /*字体加粗*/
			letter-spacing: 2px; /*字符间距*/
			margin-bottom: 6px;
		}
		.timetable dd {
			width: 193px;
			height: 60px;
			margin: 0 auto;
			border-bottom: 1px solid #ccc;
			padding-top: 12px;
			box-sizing: border-box;
		}
		.timetable dd h4 {
			font-size: 16px;
			font-weight: normal;
			color: #4e4e4e;
		}
		.timetable dd h5 {
			font-size: 14px;
			font-weight: normal;
			color: #a5a5a5;
		}
		.timetable dd:last-child {
			border: 0;
		}
		.timetable dd a {
			height: 38px;
			border: 1px solid #00a4ff;
			display: block;
			text-align: center;
			line-height: 38px;
			color: #00a4ff;
			font-weight: 700;
		}
		/*推荐部分*/
		.recom {
			height: 60px;
			background-color: #fff;
			margin-top: 10px;
			box-shadow: 0 2px 2px rgba(0,0,0,0.2);
		}
		.recom a {
			color: #4e4e4e;
			float: left;
			display: block;
			padding: 20px;
			border-right: 1px solid #4e4e4e;
			box-sizing: border-box;
		}
		.recom a:last-child {
			float: right;
			border: 0;
		}
		</style>
	</head>
	<body>
		<!--页面头部分-->
		<header>
			<nav>
				<!--logo部分-->
				<div class="logo">
					<img src="images/logo.png" alt=""/>
				</div>
				<!--导航栏部分-->
				<div class="navbar">
					<ul>
						<li><a href="">首页</a></li>
						<li><a href="">课程</a></li>
						<li><a href="">职业规划</a></li>
					</ul>
				</div>
				<!--个人中心部分-->
				<div class="personal"> <!--个人中心放到上面因为是右浮动,需要先浮动-->
					<a href="">个人中心<img src="images/ld.png" alt=""></a>
					<a href=""><img src="images/pic.png" alt="">123</a>
				</div>
				<!--搜索框部分-->
				<div class="search">
					<input type="text" placeholder="请输入关键词">
					<input type="submit" value=" ">  <!--图片背景-->
				</div>

			</nav>
		</header>
		<!--banner部分-->
		<div class="banner">
			<div class="banner-in contanier">
				<!--左侧导航栏-->
				<div class="sliderbar">
					<ul>
						<li><a href="">前端开发 <span>></span> </a></li>
						<li><a href="">后端开发 <span>></span> </a></li>
						<li><a href="">移动开发 <span>></span> </a></li>
						<li><a href="">人工智能  <span>></span> </a></li>
						<li><a href="">商业预测  <span>></span> </a></li>
						<li><a href="">云计算&大数据  <span>></span> </a></li>
						<li><a href="">运维&从测试  <span>></span> </a></li>
						<li><a href="">UI设计  <span>></span> </a></li>
						<li><a href="">产品  <span>></span> </a></li>
					</ul>
				</div>
				<!--小课表部分-->
				<dl class="timetable">
					<dt>我的课程表</dt>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<h5>正在学习 使用对象</h5>
					</dd>
					<dd><a href="">全部课程</a></dd>
				</dl>
			
		</div>
		<!--推荐部分-->
		<div class="recom contanier">
			<a href="">精品推荐</a>
			<a href="">JQuery</a>
			<a href="">Spark</a>
			<a href="">MySQL</a>
			<a href="">JavaWb</a>
			<a href="">MySQL</a>
			<a href="">JavaWb</a>
			<a href="">修改兴趣</a>
		</div>
	</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2117941.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 9月9日,星期一

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年9月9日 星期一 农历八月初七 1、 三部门&#xff1a;拟允许在北京、天津、上海、广州、深圳、南京等地设立外商独资医院。 2、 巴黎残奥会结束&#xff1a;中国体育代表团获得94金76银50铜&#xff0c;连续六届残奥会位列…

C语言第二周课

目录 引言: 一、数据类型大小及分类 (1)计算机中常用存储单位 (2)整体介绍一下C语言的数据类型分类。 (3)下面是我们本节课要学的基本内容----常用的数据类型 二、 数据类型的数值范围 三、打印输出类型 数据类型打印示例: 引言: 我们常常在写C语言程序时&#xff0c;总…

用AI操作电脑:使用PyQt和Python结合AI生成代码的实用指南

​ 在github上有这样一个名字叫做open-interpreter的项目&#xff0c;收获了52k个Star。该项目通过自然语言来控制电脑&#xff0c;极大简化了使用电脑的难度&#xff0c;提高了工作效率。受该项目启发&#xff0c;我们可以做一个中文版桌面AI助手。 分步思考&#xff1a; 自…

算法工程师转行大模型:时代的选择or个人的选择

算法工程师的黄金时代&#xff1a;大模型转行之路 随着人工智能技术的飞速发展&#xff0c;尤其是深度学习领域的大规模预训练模型&#xff08;大模型&#xff09;的兴起&#xff0c;算法工程师们正面临前所未有的机遇与挑战。本文旨在探讨算法工程师如何顺利过渡到大模型领域…

基于Matlab的图像去雾系统(四种方法)关于图像去雾的基本算法代码的集合,方法包括局部直方图均衡法、全部直方图均衡法、暗通道先验法、Retinex增强。

基于Matlab的图像去雾系统&#xff08;四种方法&#xff09; 关于图像去雾的基本算法代码的集合&#xff0c;方法包括局部直方图均衡法、全部直方图均衡法、暗通道先验法、Retinex增强。 所有代码整合到App designer编写的GUI界面中&#xff0c;包括导入图片&#xff0c;保存处…

吴恩达发布企业AI转型手册,AI Transformation Playbook,对公司高管、正在创业的AIer是不错的指南。

AI 时代&#xff0c;人人都在创业。 今天看到一篇吴恩达发布的 AI 转型指南&#xff0c;原文《 AI Transformation Playbook——How to lead your company into the AI era》。 对公司高管、正在创业的 AIer 是个不错的指南。 这本人工智能转型手册借鉴了领导谷歌大脑团队和百…

浅谈OLTP 与 OLAP 数据建模的差异

OLTP 与 OLAP&#xff1a;常见工作流 联机分析处理 (OLAP) 和联机事务处理 (OLTP) 是两种主要的数据处理系统。两者之间存在多种差异。 OLTP 系统旨在处理来自多个用户的多个事务&#xff0c;它们通常用于许多应用程序的后端。例如&#xff0c;在线商务网站将使用 OLTP 系统来…

chapter13-常用类——(Arrays)——day16

目录 481-Arrays排序源码解读 483-Arrays模拟排序 484-Arrays其他方法 485-Arrays课堂练习 481-Arrays排序源码解读 接口编程-compare 483-Arrays模拟排序 484-Arrays其他方法 二分搜索查找要求有序&#xff0c;如果数组中不存在这个元素&#xff0c;返回-&#xff08;low1&…

Sentence-BERT实现文本匹配【CoSENT损失】

引言 还是基于Sentence-BERT架构&#xff0c;或者说Bi-Encoder架构&#xff0c;但是本文使用的是苏神提出的CoSENT损失函数1。 点击来都是缘分&#xff0c;之前过时的方法可以不细看&#xff0c;别的文章可以不收藏&#xff0c;现在是最流行的方法&#xff0c;这篇文章建议收藏…

ASIO网络调试助手之一:简介

多年前&#xff0c;写过几篇《Boost.Asio C网络编程》的学习文章&#xff0c;一直没机会实践。最近项目中用到了Asio&#xff0c;于是抽空写了个网络调试助手。 开发环境&#xff1a; Win10 Qt5.12.6 Asio(standalone) spdlog 支持协议&#xff1a; UDP TCP Client TCP Ser…

利用高德+ArcGIS优雅获取任何感兴趣的矢量边界

荷花十里&#xff0c;清风鉴水&#xff0c;明月天衣。 四时之景不同&#xff0c;乐亦无穷尽也。今天呢&#xff0c;梧桐君给大家讲解一下&#xff0c;如何利用高德地图&#xff0c;随机所欲的获取shp边界数据。 文章主要分成以下几个步骤&#xff1a; 首先搜索你想获取的矢量…

深度学习中常见的损失函数

关注B站可以观看更多实战教学视频&#xff1a;hallo128的个人空间 深度学习中常见的损失函数 损失函数的作用 损失函数是衡量神经网络输出与真实标签之间差距的指标。在训练过程中&#xff0c;神经网络的目标是最小化损失函数的值。常见的损失函数包括均方误差&#xff08;MS…

HCIA--实验十二:交换机TRUNK接口实验

两个交换机TRUNK接口实验 一、实验内容 1.需求/要求&#xff1a; 通过两台交换机和四台主机连通&#xff0c;划分两个VLAN&#xff0c;实现同VLAN间通信。理解access接口和trunk接口的区别&#xff0c;熟记access和trunk的配置命令。 二、实验过程 1.拓扑图&#xff1a; 2…

从0开始深入理解并发、线程与等待通知机制

1、 从0开始深入理解并发、线程与等待通知机制 从上面两大互联网公司的招聘需求可以看到&#xff0c;大厂的Java岗的并发编程能力属于标配。 而在非大厂的公司&#xff0c;并发编程能力也是面试的极大加分项&#xff0c;而工作时善用并发编程则可以极大提升程序员在公司的技术…

Gray_opening和gray_closing 你用吗?

一张图&#xff0c;来自南京信息工程大学的视频课程 #1&#xff0c;复习一下各种图像处理神器&#xff0c; 取最小值&#xff0c;取最大值&#xff0c;取中间值&#xff0c;取均值&#xff0c;取高斯值&#xff0c;还有双边滤波&#xff0c;丰富对图像的处理 #2&#xff0c;…

不正确使用 public、private、protected,导致封装性差或无法访问

在Java学习中&#xff0c;封装&#xff08;Encapsulation&#xff09;是面向对象编程的重要特性之一。它通过隐藏对象的内部细节&#xff0c;并通过公开的接口与外界交互&#xff0c;从而提高代码的安全性、可维护性和模块化。 然而&#xff0c;如果不正确地使用访问修饰符&am…

ROS2图形化方式新建功能包工具- Turtle Nest

提示&#xff1a;全文AI生成。 链接&#xff1a; https://github.com/Jannkar/turtle_nest 配置 Turtle Nest 使用说明&#xff08;中文版&#xff09; 一、Turtle Nest 简介 正如海龟巢是幼海龟的诞生地&#xff0c;ROS 2 Turtle Nest 是 ROS 2 包的诞生和成长之地。Turtl…

JavaEE:多线程进阶(线程安全的集合类)

文章目录 线程安全的集合类多线程环境使用ArrayList多线程环境使用队列多线程环境使用哈希表HashtableConcurrentHashMap 线程安全的集合类 之前学习的集合类大部分都不是线程安全的. 比如ArrayList,Queue,HashMap等等,这都是线程不安全的. Vector,Stack,Hashtable,这些集合类…

使用Git进行版本控制:前端开发者的最佳实践

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介使用Git进行版本控制&#xff1a;前端开发者的最佳实践1. 引言2. Git的基本概念2.1 版本控制系统的作用2.2 Git 的基本操作 3. Git最佳实践3.1 使用有意义的提交信息3.2 小步提交&#xff0c;频繁提交3.3 使用分支进行开发3.4 代码…

SparkSQL SET和RESET

前言 我们在用代码写spark程序的时候,如果要设置一些配置参数,可以通过: SparkConf val conf = new SparkConf().setMaster("local[2]").setAppName("CountingSheep") val sc = new SparkContext(conf)spark-submit ./bin/spark-submit --name "M…