CSS3-学成网案列制作（CSS+DIV）

最新推荐文章于 2024-03-24 14:16:40 发布
最新推荐文章于 2024-03-24 14:16:40 发布
阅读量529 收藏 2
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45026839/article/details/108238655
版权

学成网案列总结：

  1. 首先确定版心 1200px

  2. 确定模块（一行一行来做）

  3. 分析顺序（从大到小）

  4. 最终所需达到的页面效果：在这里插入图片描述

  5. 头部以及banner代码部分（需要浮动的知识）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*css初始化开始*/
			* {
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			.clearfix:before,clear:after {
				content: ".";
				display: table;
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			a {
				color: #050505;
				text-decoration: none; /*取消下划线*/
			}
			.container { /*因为我们的版心宽度都是1200 都要居中对齐 所以我们什么一个公共类*/
				width: 1200px;
				margin: 0 auto;
			}
			/*css初始化结束*/
			header {
				height: 100px;
				/*background-color: pink;*/
				overflow: hidden; /*防止外边距合并*/
			}
			body {
				background-color: #f3f5f7; /*整个页面的背景色*/
			}
			/*input {
				border: 0;
			}*/
			nav {
				height: 42px;
				width: 1366px;
				margin: 26px auto; /*盒子水平居中对齐*/
			}
			input {
				border: 0; /*所有的表单边框为0*/
				box-sizing: border-box; /*css3盒子模型 border 和 padding 都包含到 width 里面去*/
				border-radius: 10px;
			}
			.logo {
				float: left;
			}
			.navbar {
				float: left;
				height: 42px;
				line-height: 42px;
				margin-left: 50px;
			}
			.navbar li {
				float: left; /*作用:让首页,课程,职业规划一行显示*/
			}
			.navbar li a {
				padding: 0 8px; /*上下0px ,左右8px*/
				height: 42px;
				display: block;
			}
			.navbar li a:hover {
				border-bottom: 2px solid blue;
			}
			.search {
				width: 410px;
				height: 38px;
				border: 1px solid #00a4ff;
				float: right;
				margin-left: 50px;
				border-radius: 10px;
			}
			.search input[type=text] { /*属性选择器 type 为text 的文本框*/
				background-color: #f3f5f7;
				width: 360px;
				height: 38px; 
				padding-left: 20px;
				float: left;
			}
			.search input[type=submit] { /*属性选择器 type 为submit 的文本框*/
				width: 50px;
				height: 38px;
				float: left;
				border-radius: 0 10px 10px 0;
				background: #00a4ff url(img/search_06.png) center center no-repeat;
			}
			.personal {
				height: 42px;
				line-height: 42 px;
				float: right;
				margin-left: 50px;
			}
			.personal img {
				padding: 0 8px;
			}
			.banner {
				height: 420px;
				background-color: #1B026B;
			}
			.banner-in {
				height: 420px;
				background: url(img/banner_03.png) 0 0 no-repeat;
				}
			.slidebar {
				width: 190px;
				height: 420px;
				background-color: rgba(0,0,0,0.4);
				float: left;
			}
			.slidebar li {
				padding: 12px 20px;
			}
			.slidebar li a {
				color: #FAFBF8;
				font-size: 14 px;
			}
			.slidebar li a:hover {
				color: blue;
			}
			.slidebar a span {
				float: right;
				font-family: arial;
			}
			.timetable {
				width: 230px;
				height: 300px;
				background-color: #FFFFFF;
				float: right;
				margin-top: 50px;
			}
			.timetable dt {
				height: 50px;
				line-height: 50px;
				background-color: #9bceea;
				text-align: center;
				color: #FFFFFF;
				font-weight: 700; /*文字加粗*/
				margin-bottom: 5px;
				letter-spacing: 2px; /*设置字间距*/
			}
			.timetable dd {
				width: 193px;
				height: 60px;
				margin: 0 auto;
				color: #898989;
				border-bottom: 1px solid #EBEBEB;
				padding-top: 12px;
				box-sizing: border-box;
			}
			.timetable dd:last-child{ /*结构伪类选择器 选取最后一个孩子 去除下面的border边框*/
				border: 0;	
			}
			.timetable dd h4 {
				font-size: 16px;
				font-weight: normal;
				color: #4e4e4e;
			}
			.timetable dd p {
				color: #a5a5a5;
				font-size: 14px;
			}
			.timetable dd a {
				width: 200px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				display: block;
				color: dodgerblue;
				font-weight: 700; /*文字加粗*/
				letter-spacing: 2px; /*设置字间距*/
				border: 1px solid dodgerblue;
			}
			.timetable dd a:hover {
				background-color: cornflowerblue;
				color: #FFFFFF;
			}
			.recommand {
				height: 60px;
				margin-top: 8px;
				line-height: 60px;
				background-color: #FFFFFF;
				box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
				/*盒子阴影 水平位置 垂直位置 模糊距离 影子颜色*/	
			}
			.recommand a {
				padding:0 30px;
				border-right: 1px solid #BEBEBE;
				font-weight: 700;
			}
			.recommand a:first-child {
				color: #11AAFF;
			}
			.recommand a:hover {
				color: #11AAFF;
			}
			.recommand a:last-child {
				color: #11AAFF;
				border: 0;
				float: right;
				font-weight: normal;
				padding-right:60px ;
			}	
		</style>
	</head>
	<body>
		<!--页面头部分开始-->
		<header>
			<nav>
				<!--logo部分-->
				<div class="logo">
					<img src="img/logo_03.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="img/ling_06.png"/></a>
					<a href="#"><img src="img/tou_03.png"/>刘芳</a>
				</div>
				<!--个人中心 结束-->
				<!--搜索框部分开始-->
				<div class="search">
					<form action="" method="post">
						<input type="text" placeholder="请输入关键词" />
						<!--placeholder 占位符 内容输入自动清除默认值-->
						<input type="submit" value=" "/>
					</form>
				</div>
				<!--搜索框部分结束-->
				<!--banner开始部分-->
			</nav>
		</header>
		<!--页面头部分结束-->
		<!--banner 部分开始-->
		<div class="banner">
			<div class="banner-in container">
				<!--左侧导航栏  侧边栏-->
				<div class="slidebar">
					<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="#">云计算&amp;大数据<span>></span></a></li>
						<li><a href="#">运维&amp;测试 <span>></span></a></li>
						<li><a href="#">UI设计 <span>></span></a></li>
						<li><a href="#">产品 <span>></span></a></li>
					</ul>
				</div>
				<!--小课表部分-->
				<div class="timetable">
					<dl>
						<dt>我的课堂</dt>
						<dd>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>	
						</dd>
						<dd>
							<h4>继续学习 web前端开发</h4>
							<p>正在学习-使用对象</p>
						</dd>
						<dd>
							<h4>继续学习 UI设计</h4>
							<p>正在学习-使用对象</p>
						</dd>
						<dd>
							<a href="#">全部课程</a>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<!--banner 部分结束-->
		<!--精品推荐部分开始-->
		<div class="recommand container">
				<a href="#">精品推荐</a>
				<a href="#">JQuery</a>
				<a href="#">Spark</a>
				<a href="#">MySQL</a>
				<a href="#">JavaWeb</a>
				<a href="#">Vue</a>
				<a href="#">SpringMvc</a>
				<a href="#">修改兴趣</a>
			</ul>
		</div>
		<!--精品推荐部分结束-->
	</body>
</html

效果图：在这里插入图片描述

  1. 精品推荐body 部分 （需要用到定位的知识）
    在这里插入图片描述
    7.效果展示：在这里插入图片描述相关代码（html结构以及css样式）： 
<div class="rec-product container">
			<div class="rec-hd">精品推荐
				<a href="#">查看全部</a>
			</div>
			<div class="rec-body clearfix">
				<ul>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
					<li>
						<img src="img/icon1.png"/>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<p><span>高级</span> •  1125人在学习</p>
						<div class="hot">
							HOT
						</div>
					</li>
				</ul>
			</div>
		</div>

 /*css初始化开始*/
			* {
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			body {
				height: 3000px;
			}
			.clearfix:before,.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			a {
				color: #050505;
				text-decoration: none; /*取消下划线*/
			}
			.container { /*因为我们的版心宽度都是1200 都要居中对齐 所以我们什么一个公共类*/
				width: 1200px;
				margin: 0 auto;
			}
			body {
				background-color: #f3f5f7; /*整个页面的背景色*/
			}

.rec-product {
				margin-top: 35px;
			}
			.rec-hd {
				height: 40px;
				font-size: 16px;
				background-color: #f3f5f7;
				color: #494949;
			}
			.rec-product a {
				float: right;
				padding-right: 40px;
				font-size: 14px;
				color: #a5a5a5;
			}
			.rec-product a:hover {
				color: #00A4FF;
			}
			.rec-body ul li {
				width: 228px;
				height: 270px;
				background-color: #FFFFFF;
				overflow: hidden;
				position: relative;
				box-shadow: 0 4px 5px rgba(0,0,0,0.4);
				float: left;
				margin-right: 15px;
				margin-bottom: 15px;
			}
			.rec-body ul li:nth-child(5n) {
				margin-right: 0;
			}
			.rec-body li h4 {
				font-size: 14px;
				padding: 10px 26px;
				color: #232323;
			}
			.rec-body li p {
				font-size: 12px;
				padding-left: 26px;
				color: #B2B2B2;
			}
			.rec-body p span {
				color: #FE972D;
			}
			.hot {
				width: 40px;
				height: 20px;
				background-color: #FFFFFF;
				border: 1px solid #FE972D;
				color: #FE972D;
				text-align: center;
				position: absolute;
				top: 5px;
				right: 0;
				box-shadow: 1px 1px 2px 2px #FE972D;
			}
  1. 页面底部在这里插入图片描述注： 由于css代码有点多所以这里就不复制了
  2. 目前页面的效果就是下图：
    在这里插入图片描述
Pop–
关注
专栏目录
学成网完整版代码css.rar
02-28
适合初学HTML网页制作，个人报告作业
CSS 学成网（二）
林彬的专栏
06-01 6229
学成网小圆点 /* 小圆点模块 */ .circle { width: 180px; height: 22px; /* background-color: pink; */ position: absolute; bottom: 10px; left: 50%; margin-left: -90px; } .circle li { float: left; ...
CSS-学成网
林彬的专栏
05-28 1251
CSS-学成网 黑马前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网</title> <style> /* 样式 */ /* css初始化 */ * { /* 清除内外边距 */ margin:...
css实操：学成网综合案例
weixin_44817062的博客
07-21 834
css实操：学成网综合案例 页面效果： 易错点很多，需要注意的地方都有注释。常看！ HBuilder X > css > 学成网首页.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学成网首页</title> <style type="text/css"> * { margin: 0; pad
学成在线（html和css考试试题）.rar
08-24
这是一个学完html和css基础课程就可以独立制作的网页，可以用来检验自己的布局水平，看看自己还有那些不足
css制作学习网页
qq_43537987的博客
02-15 593
效果展示 制作头部 html &lt;header&gt; &lt;nav&gt; &lt;!-- logo部分 --&gt; &lt;div class="logo"&gt; &lt;img src="images/logo_03.png" alt=""&gt; &lt;/div&gt; &lt;!-- 导航
CSS学习笔记
JSongRui的博客
02-23 250
CSS学习笔记
【爬虫&APP逆向006】异步案列实现&selenium
最新发布
初遇我ㄖ寸の热情呢？
03-24 316
比如，对于输入框，我们就调用它的输入文字和清空文字方法；其实，还有另外一些操作，它们没有特定的执行对象，比如鼠标拖曳、键盘按键等，这些动作用另一种方式来执行，那就是动作链。为什么需要等待 如果网站采用了动态html技术，那么页面上的部分元素出现/加载的时间便不能确定，这个时候就可以设置一个等待时间，强制等待指定时间，等待结束之后进行元素定位，如果还是无法定位到则报错。比如，下拉进度条，它可以直接模拟运行JavaScript，此时使用execute_script()方法即可实现。实现js注入，绕过检测。
Web前端学习笔记
weixin_43487110的博客
09-03 2229
Web前端学习笔记 2020-9-3整理 2019-9月-19学完 作者:小宇 HTML 基础知识 互联网中的三大基石 Html (HyperText Markup Language) 超文件标记语言 Http (HyperText Transfer Protocol)超文本传输协议 Url (Uniform Resource Locator) 统一资源定位符 HTML、CSS、JS之间的关系 如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+C
HTML基础学习-html规范、操作思想、常用标签（重点：表单）
大磊的博客
05-05 645
JavaWeb_Html_学习笔记 1、html的简介： 什么是html?         -HyperText Markup Language :超文本标记语言，网页语言         **超文本：超出文本的范畴，使用html可以轻松实现这样的操作         **标记：html所有的操作都是通过标记实现的，标记就是标签，&lt;标签名称&gt;         **网页语言：...
学成在线电商项目 齐全资料视频、代码文档
04-22
分布式电商项目、培训课程网站、一共20天课程全的，视频+代码文档齐全资料视频、代码文档，跟着这个学下来就可以拥有真实的项目奖经验
HTML+CSS学成在线案例的素材和源码以及切图工具cutterman
07-22
内容概要：HTML+CSS学成在线案例的素材和源码，需要的小伙伴可以下载，里面还有最好用的切图工具cutterman，帮助你一秒切图，下载完注册个cutterman账号即可使用 适合人群：具有一定的前端基础，CSS学完浮动可以尝试做一下这个案例 能学到什么：做完这个案例，还是很有成就感的，也可以巩固一下自己的知识点，同时了解去写一个网站的流程 阅读建议：可以自己先想一下思路，再看源码，实现界面有很多种方式，不一定要和源码一模一样，只要方便快捷都可以 希望这个资源对你有所帮助！
学成网PSD.rar
07-02
前端css切图练习素材包，包含4个psd文件（学成网职业规划.psd 学成网首页.psd 学成网课程列表页.psd 学成网课程介绍页.psd）
css经典教程 真实案例
11-30
真实透彻讲解css最深沉知识，帮助你提高不一样的自己，
CSS项目之学成网(五)
尧子陌
03-31 180
目标 了解单页面制作的流程 掌握css的初始化语句 掌握css属性的书写顺序 准备 学成网之psd 开发工具=PhotoShop(切图)+Vs Code+谷歌浏览器 项目的文件夹 css文件夹 存放样式表。 images文件夹：存放图像 index:首页的内容。 ...
css项目5:学成网首页制作（div+css）一个大页面！！！
小黄呀呀呀的博客
04-30 930
1、index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网首页</title> <link rel="stylesheet" href="style.css"> </head> &lt...
学成网首页案例HTML+CSS技巧分享
huahua123mh的博客
07-28 1454
一、建议准备工作 1.学成网首页psd文件 2.Cutterman切图工具（Ps插件） 二、布局构思 0）整体模块： 学成网首页案例 区域类名 区域 .header 头部区域 .banner 横幅广告区域 .goods 精品推荐导航区域 .box 精品推荐课程区域 .programer 编程入门区域 .web 前端开发区域 .footer 页脚区域 注意：因为.
精通CSS+DIV网页样式与布局--制作实用菜单
从手指到键盘，谱出生命的轨迹~~~
01-10 5409
在上篇博文中，小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素，今天小编继续将来介绍CSS的相关基础知识，这篇博文，小编主要简单的总结一下在CSS中如何制作网页中的菜单，这部分的内容包括：项目列表、无需表格的菜单、菜单的横竖装换，看下面一张思维导图：                    首先，我们看项目列表，列表的符号，我们来看例子代码和运行效果：           项目
[附相应图片]HTML+CSS学成网首页制作基础案例
weixin_43682519的博客
01-23 8324
这是一个比较基础的html和css基础案例实战，适合刚学习完各种html控件和css标签的应用。
使用CSS创建按钮-DIV+CSS布局实战
"本文档主要介绍了如何使用CSS来制作按钮，并探讨了DIV+CSS在网页布局中的应用，包括W3C标准、盒子模型以及CSS的基础知识。" 在网页设计中，CSS（层叠样式表）被广泛用于控制页面的样式和布局。本教程以“用css制作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值