css布局，伪类选择器练习

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量484 收藏 5
点赞数 1
分类专栏： css初学 css新手布局练习 a标签伪类选择器 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiyu18/article/details/109350515
版权

css伪类选择器练习

为了熟练掌握css各种选择器，还是需要多加练习
完成以下布局:
在这里插入图片描述

要求:掌握好类名的使用，伪类选择器使用正确，并活用以学习的标签及标签特性。
分析:此次练习中出现大量的a标签（均需要a标签的伪类选择器），但是可以设置同一个类名（css的好处）并且最下方可以使用自定义列表（<dl></dl><dt></dt><dd></dd>）
代码实现：
html部分

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器练习</title>
		<link rel="stylesheet" type="text/css" href="./dangdangwang.css">
	</head>
	<body>
		<div id="a1">
			<p class="p1"><a href="#" class="a1">当当</a><a href="#" class="a2">官网-正品低价品质保证!</a><a  class="a3">&nbsp;官方&nbsp;</a></p>
			<div class="div1">
				<a href="#"><img src="./tu1.png" alt="???"></a>
				<div class="div2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【当当】全球知名的综合性网上购物商城，千万商品，品质保证，涵盖<a href="#"class="a2">图书、</a><a href="#"class="a2">童书、</a><a href="#"class="a2">电子书、</a>听书、<a href="#"class="a2">服装、</a><a href="#"class="a2">百货</a>等品类，全场2.9折起！提供货到付款和多种线上支付方式，上门退货、当面退款，100%正品保障，专业配送及售后服务！为顾客提供网上购物的高品质体验！<br/><span class="span1">www.dangdang.com2020-10 </span><span class="span2">&nbsp;保&nbsp;</span> - <span class="span3"><a class="a2">品牌广告</a></span></div>
			</div>
			<p class="p2"><a href="#"class="a2">百万图书每满100减50</a></p>
			<p class="p2"><a href="#"class="a2">电子书开门红每满30减15</a></p>
			<div class="div3">
			<!-- 思路：设一个大盒子把自定义列表装进去，但是需要margin自定义列表的边距改掉 -->
				<div class="div4">
					<dl>
						<dd class="dd1">&nbsp;热门分类</dd>
						<!-- 这里用到了边框设置下边框 border-bottom:solid 1px #000 -->
						<dd class="dd2"><a href="#" class="a2">励志图书</a></dd>
						<dd class="dd2"><a href="#" class="a2">经济管理</a></dd>
						<dd class="dd2"><a href="#" class="a2">教育图书</a></dd>
					</dl>
				</div>
				<div class="div4">
					<dl>
						<dd class="dd1">&nbsp;图书榜单</dd>
						<dd class="dd2"><a href="#" class="a2">畅销总榜</a></dd>
						<dd class="dd2"><a href="#" class="a2">新书榜单</a></dd>
						<dd class="dd2"><a href="#" class="a2">童书榜</a></dd>
					</dl>
				</div>
				<div class="div4">
					<dl>
						<dd class="dd1">&nbsp;新书推荐</dd>
						<dd class="dd2"><a href="#" class="a2">10月童书新书速递</a></dd>
						<dd class="dd2"><a href="#" class="a2">人气文艺新书榜</a></dd>
						<dd class="dd2"><a href="#" class="a2">社科</a></dd>
					</dl>
				</div>
				<div class="div4">
					<dl>
						<dd class="dd1">&nbsp;电子书</dd>
						<dd class="dd2"><a href="#" class="a2">电子书每满30减15</a></dd>
						<dd class="dd2"><a href="#" class="a2">项塔兰</a></dd>
						<dd class="dd2"><a href="#" class="a2">网络文学</a></dd>
					</dl>
				</div>
			</div>
		</div>
	</body>
</html>

css部分

#a1{
	width:538px;
	height:318px;
	border-top:solid 1px #e3e3e3;
	border-right:solid 1px #e3e3e3;
	margin:30px auto 0;
	background-color:#fff8f9;
}
.p1{
	font-size:18px;
	line-height:18px;
	margin:7px auto 0;
}
.a1{
	color:red;
	margin:0 0 0 15px;
}
.a3{
	background-color:#2196ff;
	font-size:12px;
	color:#fff;
	margin:0 0 0 10px;
}
.a2:link{
	color:#2440b3;
}
.a2:visited{
	color:#873e9e;
}
.a2:hover{
	color:#87cca2;
}
.a2:active{
	color:#cc6666;
}
.div1{
	width:538px;
	height:130px;
	margin:6px auto 0;
}
.a3:hover{
	background-color:#2185dd;
}
img{
	margin:4px 0 0 9px;
	width:121px;
	height:121px;
	float:left;
}
.div2{
	width:395px;
	height:130px;
	float:left;
	margin:0 0 0 7px;
	font-size:14px;
	line-height:20px;
}
.span1{
	color:#008000;
}
.span2{
	background-color:#8fb8f9;
	color:#fff;
/*	扩展，边框倒角 */
	border-radius:3px;
}
.span3{
	color:#7cabf7;
}
.p2{
	margin:7px 0 0 9px;
	font-size:14px;
}
.div3{
	width:518px;
	height:93px;
	margin:10px auto 0;
	font-size:12px;
}
.div4{
	width:128px;
	height:93px;
	float:left;
}
.dd1{
	background-color:#fafafa;
	border-bottom:solid 1px #f3f3f3;
}
.dd2{
	border-bottom:solid 1px #f3f3f3;
}
dd{
	margin:0 auto;
}

实现效果：
开始为了辨别块设置了背景颜色
总结：
伪类标签需要按顺序写出（link, visited, hover, active）否则会发生无法实现的情况，<dl></dl><dd></dd>标签自带属性无法实现左对齐，需要margin 修改，写代码时要写好class类名，因为里面a标签过多，如果不写好类名会容易混乱而出现错误。

*因为我是初学新手，可能会有很多地方有错误或者有些代码写的还是不够整洁，希望您可以给指出错误和可以改进的地方。
*

shiyu18
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css选择器练习
Sawada00的博客
01-16 355
网址：餐厅练习 1. plate 2. bento 3. <plate id="fancy" /> plate#fancy 4. plate>apple plate#fancy>pickle apple.small orange.small bento>orange.small plate,bento plate>* plate+apple.small,plate+apple bent
CSS伪类选择器
Junran_Tan的博客
10-29 130
伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ a { /* a是标签选择器 所有的链接
a标签伪类选择器练习（a标签导航栏）
407指导员
11-19 445
a标签伪类选择器练习 模拟导航栏，悬停修改背景/字体颜色,长按改变字体颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a标签伪类选择器练习</title> <style> * { padding: 0; margin: 0;
伪类练习二
weixin_44549398的博客
06-09 128
这是我做的一个伪类练习，我就简单的来说一下吧！ <div class="con"> <h1> <a href="">文化与发展</a> </h1> </div> 首先打一个div然后在里面添加一个类之后在这个类里面打一个h3标签里面包裹着a标签在里面写几个字。 .con h1 a{ text-decora...
结构伪类选择器（部分）
laodaer的博客
12-05 256
结构伪类选择器：总结--当页面上的某个元素处于在不同的位置上的时候，我们可以通过伪类选择器去选择某个标签或者某个class相同的元素li:first-child 就是第一个lili:last-child 就是最后一个lili:nth-child（n） ，n是几就是第几个li代码： 效果图：li:nth-child(odd) 就是排在奇数的lili:nth-child(even) 就是排在偶数数的li代码： 效果图：1. ：2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li
前端歌谣的刷题之路-第十一题-伪类选择器
qq_41632427的博客
09-04 65
​ 目录 前言 题目 核心代码 总结 前言 我是歌谣 本题目源自于牛客网 微信公众号前端小歌谣 题目 请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0) ​编辑 核心代码 <!DOCTYPE html> <html lang="en"> <head> <me...
css笔记
c1523456的博客
11-01 1018
css3 基础内容
前端css选择器练习diner.zip
04-22
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
css选择器练习代码1
01-31
本练习代码1着重于深入理解和实践CSS选择器，以提升网页设计和布局的精准度。下面将详细讨论CSS选择器的基本类型、用法以及它们在实际开发中的应用。 1. **基础选择器** - **类型选择器**：如`h1`，`p`等，基于...
CSS选择器的权重与优先规则分享
09-24
3. 类、伪类和属性选择器（如：`.content`）：权值为10。 4. 类型选择器和伪元素选择器（如：`div p`）：权值为1。 计算选择器特殊性的方法是将每个等级对应的选择器数量乘以该等级的权值，然后将所有等级的值相加...
很不错的CSS练手文件代码，应用多种选择器
09-11
CSS练手文件代码 CSS练手文件代码 CSS练手文件代码
练习前端-CSS引入、基础选择器-day04
08-31
- ID选择器的权重最高，其次是类选择器，再是元素选择器，最后是通配符、属性和伪类选择器。优先级计算涉及每个选择器类型的计数，最后通过比较数值决定哪个样式生效。 4. **CSS盒模型**： - 包括`content`...
HTML选择器练习（餐厅）
08-06
在这个“HTML选择器练习（餐厅）”中，我们将探讨如何有效地利用HTML选择器来创建具有吸引力的餐厅主题网页。 首先，我们需要了解HTML选择器的基本类型。在CSS中，有以下几种主要的选择器： 1. **标签选择器**：...
css3结构伪类选择器使用小例子
Sinjiufai的博客
10-24 1790
结构伪类选择器 结构伪类选择器 first-child nth-child(n) 里面可以是数字 可以是even(偶数) odd(奇数） 也可以是式子如 -n+5 表示前五个 last-child 用法与上面基本一样 但是 nth-of-type会先去查看前面指定的元素 再去看目标是排在第几个 nth-of-type(1) 例 /* 选择ul里面的第1个li */ ul li:first-child { background: blue; ..
css3添加伪类,CSS3教程:新增加的结构伪类
weixin_32260467的博客
08-03 165
:nth-child :: css 3选择器body {font: small/2 "宋体", serif;background:#fff;color:#000;}h1,h2,h3 {font-size: larger;}h4 {background:#eee;}#sample1 li:nth-child(even) {background:#FF9;}#sample1 li:nth-child(...
HTML连载64-a标签伪类选择器的注意点与练习
weixin_44630050的博客
01-19 213
一、a标签的伪类选择器注意点 （1）a标签的伪类选择器可以单独出现，也可以一起出现。也就是可以设置多个状态的样式。 （2） a标签的伪类选择器如果一起出现，那么有严格的顺序要求，编写的顺序必须要遵守原则： （love\hate原则，即link\visited\hover\active）默认状态、被访问后的状态、悬停状态、长按状态 （3）如果默认状态的阿燕是和被访问过的状态的样式一样，那么可以缩写为...
css伪类选择器练习
weixin_44017414的博客
12-13 383
HTML文件  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quo
css常用demo练习
SundayGoG的博客
05-30 1721
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1225
title>充电效果
css移动端布局练习
09-16
在移动端布局练习中，可以利用CSS的伪类选择器（:hover）和触摸事件来添加交互效果，如改变按钮的背景颜色或是显示隐藏的菜单等。 通过不断练习和实践，可以提高在移动端布局方面的能力和经验，更好地适应移动设备...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值