您好,登录后才能下订单哦!
请求超时!
请点击 重新获取二维码1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—first-of-type
附加说明:
1、整体宽为500
2、每个名言标签的间距为20,内部间距为25,字体为cursive
1、准备素材:新建images目录,将素材存放与此,方便管理,该案例中素材为一张文件图片
2、创建好index.html,写好架构,架构如何分析呢
思路分析:
1、目标分为3个部分,每个部分其实就是展示一段名言,左边带一个边框,但是第一个部分我们就可以使用first-of-type来实现,因为它的作用就是来设置指定类型的位置为第一个子元素的所有元素
好,先按照分析,写好思路,暂时不管css的实现
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—:first-of-type</title> </head> <body> <div class="container"> <div class="word"> <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p> </div> <div class="word"> <p> 什么是人生?人生就是永不休止的奋斗!只有选定了目标并在奋斗中感到自己的努力没有虚掷,这样的生活才是充实的,精神也会永远年轻。——路遥《平凡的世界》</p> </div> <div class="word"> <p>生活啊,生活!你有多少苦难,又有多少甘甜!天空不会永远阴暗,当乌云退尽的时候,蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比,花朵仍然会蓬勃开放。——路遥《平凡的世界》</p> </div> </div> </body> </html>
3、写样式 ,创建css文件夹,里面新建index.css,里面的样式怎么写了,以下是分析思路
思路分析:
所有元素的共同样式.container *
1、因为有些元素都有自己默认的padding,margin,难记,所以为了避免影响思路,我们统一将它们的默认值设置为0,之后要设置成多少,之后在元素内部单独设置
所以index.css中添加代码如下:
.container *{ padding:0; margin:0; }
外层容器
1、根据要求得知宽度为500
所以index.css中添加代码如下:
.container{ width:500px; }
文本设置.word
1、有背景色,带左边框,和下面的文本存有间隔,且字体为cursive
2、带一个小图标的背景图片,背景不重复
所以index.css中添加代码如下:
.word{ background-color: rgb(255,243,212); border-left: 10px solid rgb(246,183,60); margin-bottom: 20px; padding: 25px; font-family: cursive; background-image: url(../images/file.png); background-repeat: no-repeat; background-size: 15px; }
第一个文本设置
1、因为要求必须使用first-of-type,结合它的作用,就是设置第一个.word,我们可以用它来设置颜色
2、因为具体要求是让第一个.word里面的字体变红色
所以index.css中添加代码如下:
.word:first-of-type{ color:red; }
到此为止,index.css代码如下:
.container *{ padding:0; margin:0; } .container{ width:500px; } .word{ background-color: rgb(255,243,212); border-left: 10px solid rgb(246,183,60); margin-bottom: 20px; padding: 25px; font-family: cursive; background-image: url(../images/file.png); background-repeat: no-repeat; background-size: 15px; } .word:first-of-type{ color:red; }
然后将index.css引入index.html中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—:first-of-type</title> <link href="css/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="word"> <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p> </div> <div class="word"> <p> 什么是人生?人生就是永不休止的奋斗!只有选定了目标并在奋斗中感到自己的努力没有虚掷,这样的生活才是充实的,精神也会永远年轻。——路遥《平凡的世界》</p> </div> <div class="word"> <p>生活啊,生活!你有多少苦难,又有多少甘甜!天空不会永远阴暗,当乌云退尽的时候,蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比,花朵仍然会蓬勃开放。——路遥《平凡的世界》</p> </div> </div> </body> </html>
运行效果如下:
如果我们把CSS代码.word:first-of-type改成p:first-of-type,结果会是如何呢,从字面上看好像是第一个p标签的字体会变红色
修改CSS代码:
p:first-of-type{ color:red; }
运行结果如下:
从结果看,我们发现所有的段落字体都变红色了,为什么呢,哦,原来是因为每个p都是.word 容器的第一个子元素!
我们在第一个.word容器里再添加一个p看下结果:
<div class="word"> <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p> <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p> </div>
运行结果为:
所以看出p:first-of-type这段样式代码真正的意思是所有在容器中为第一个子元素的且类型为P标记的元素。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
聚圣源一起挣钱的群名男宝宝出身起名唐诗宋词起名男孩名字我在他乡挺好的电视剧在线观看婴儿姓杨起名碧血剑江华版烈焰猩猩三峡晚报电子版李字起名女子女内衣品牌起名字大全如何给孩子起一个好名字公司起名吉祥字大全2014年属马的女孩起名给医疗器械起名如何互联网创业公司起名做安防监控公司起什么名比较好冒名起诉是否构成虚假诉讼罪食材超市起什么名字好血型遗传起亚凯绅碰撞测试排名起姓名大全男孩打分测免费上海属于疫情什么风险地区基金净值表婚庆店起什么名字好?银杏果道家起名xilu.com马蜂窝网金善美孩子起名常用的字淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费