＜CSS练习＞综合案例-学成网含素材静态网页

最新推荐文章于 2024-02-04 20:22:04 发布

April Story

最新推荐文章于 2024-02-04 20:22:04 发布

阅读量754

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_47816527/article/details/118068197

版权

效果图
浏览器缩放缩小之后的
在这里插入图片描述
正常打开的：
这个案例综合了html css很多知识点
盒子的使用伪链接选择器定位position 浮动float ul li的用法以及外边距margin 边框border 内边距padding等但是没有添加Javasript的效果

一半情况下如果是一排的盒子如图中绿色的图片摆放很整齐用浮动
盒子上有固定的小图标就用定位如图中绿色图片上的hot 以及左侧固定的侧边栏

下面简单说明一下注意的点：
左侧固定的侧边栏的位置主要是看版心
这是它跟绝对定的盒子居中知识点的不同之处
比如本案例中
先走left的50%
在这里插入图片描述
再往左走版心的一半

再继续走自己的宽度

最后根据美观自己再往左调整一下就可以了
综上的代码是：(版心的width是1200px ，自己width是180px）
我这里是继续往左走了10px

/* 先left50% */
	left: 50%;
	/* 再左走版心的一半 */
	/* 再继续走自己的宽度  -600+（-180） */
	/* 自己看着再调一下 因为美观 但最少保证780 */
	margin-left: -790px;

总的代码是：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<!-- 固定的侧边栏 -->
		<div class="fixedbar">
			<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>
				<li><a href="#">Java工程师</a></li>
				<li><a href="#">VR开发者</a></li>
				<li><a href="#">深度学习</a></li>
				
			</ul>
		</div>
		<!-- header头部模块开始 -->
		<div class="header w">
			<!-- logo -->
			<div class="logo">
				<img src="image/logo.png" >
			</div>
			<!-- nav -->
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>	
			<!-- search -->
			<div class="search">
				<input type="text" name="" id="" value="请输入关键字" />
				<button type="button"></button>
			</div>
			<!-- user -->
			<div class="user">
				<img src="image/pic.png" >
				12132323qq@com
			</div>
			
		</div>
		<!-- header头部模块结束 -->
		<!-- banner部分start -->
		<div class="banner">
			<!-- 写在版心里 -->
			<div class="w">
				<div class="subnav">
					<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>

最低0.47元/天解锁文章

April Story

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
＜CSS练习＞综合案例-学成网含素材静态网页

效果图浏览器缩放缩小之后的正常打开的：这个案例综合了html css很多知识点盒子的使用伪链接选择器定位position 浮动float ul li的用法以及外边距margin 边框border 内边距padding等但是没有添加Javasript的效果一半情况下如果是一排的盒子如图中绿色的图片摆放很整齐用浮动盒子上有固定的小图标就用定位如图中绿色图片上的hot 以及左侧固定的侧边栏下面简单说明一下注意的点：左侧固定的侧边栏的位置主要是看版心这是它跟绝对定的盒子居中知
复制链接

扫一扫