狂神说Java CSS3讲解综合代码
2024-04-24 12:36:44
狂神说Java CSS3讲解综合代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>狂神说CSS3学习总结</title><!-- css样式生效的优先级是：就近原则--><!-- css引入的第一种方式--><style>h1 {font: italic bolder 30px/32px Arial;text-align: center;color: #ffc800;}h2 {/* font属性顺序--可以按顺序设置如下属性：font-style （使用斜体、倾斜或正常字体）font-variant （设置小型大写字母的字体显示文本）font-weight （设置文本的粗细）font-size/line-height （设置字体的尺寸和行高）font-family （规定元素的字体系列）*/font: italic bold 20px/18px arial;background: aquamarine;color: #c41b55;text-align: right;}.class1 {font: italic bold 18px/20px Arial;background: bisque;color: olivedrab;text-align: left;}#id01 {font: italic bold 21px/23px Arial;background: blue;color: azure;text-align: center;}.css01 {text-align: left;font: italic bold 16px/17px Arial;background: #b6b657;color: azure;}.css02 {text-align: left;background: #00ffcc;}/*1、相邻兄弟选择器（匹配指定元素的相邻【下一个】兄弟元素）*/#brother + span {font: italic bold 18px/19px Arial;color: #ff00aa;}/*2、通用兄弟选择器（匹配到某元素【后面的】 【所有指定】兄弟元素）*//* #brother ~ span{font:italic bold 18px/19px Arial;color: #0073ff;}*//*3、属性选择器 (属性选择器可以根据元素的属性及属性值来选择元素。)*/span[id] {color: red;}/*4、CSS 后代选择器（后代选择器可以选择作为某元素后代的元素。）*/span em {color: #59ff00;}/*5、CSS子元素选择器（子元素选择器（Child selectors）只能选择作为某元素子元素的元素。）*/span > strong {color: #ff0059;}/*6、结构伪类选择器（:first-child 选择元素中的第一个子元素。:nth-child(n) 定位某个父元素的一个或多个特定的子元素。）*//*span:first-child {color: #9d54c4;}span:nth-child(2) {color: #9d54c4;}*/#work01 {text-align: center;color: red;}a[class~="links"] {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #77b177;color: red;text-align: center;text-decoration: none;margin-right: 20px;padding: 30px 10px 0px 10px;}.css03 {float: none;display: inline-block;}/*图片和文本对齐*/#id03 {text-align: left;color: red;text-indent: 20px;letter-spacing: 3px;font-size: 19px;line-height: 1.8;text-decoration: underline;}.center {vertical-align: middle;}/*超链接伪类*/a[href="#top"] {text-decoration: none;color: #474040;}a[href="#top"]:hover {color: #08ff00;}a[href="#top"]:active {color: red;}#id05 {box-shadow: 20px 20px 5px #888888;}/*列表的css*/#nav{width:300px;}.title{background: red;color: #0c0c0c;font:normal 600 18px/30px Arial;text-align: left;text-indent: 20px;margin:0;}ul{background: #8e8e8a;margin: 0;}ul li{height: 30px;list-style: none;text-indent: 1em;position: relative;}li:first-child{padding:15px 0 0 0;}a[href="#"]{text-decoration:none;color:#000;font-size: 14px;}a[href="#"]:hover{color:orange;text-decoration: underline;}/* 背景图片*/.div1{width: 1400px;height: 400px;border: 2px solid red;background: url("http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg");background-repeat:repeat-y;}/*渐变背景*/.div2{width:1300px;height:300px;border:3px solid rosybrown;background-image: linear-gradient(#eef67a, #77ff00);}/* 盒子模型*/.div3{width:400px;height: 200px;border:2px solid red;text-align: center;}#vip2{font:normal 600 16px/30px Arial;background: #3cbda6;text-align: left;}.form{background: #3cbda6;}div:nth-of-type(1) input {border:2px dotted #3e3b3b;margin:15px 5px 15px 5px;}div:nth-of-type(2) input{border:2px solid red;padding: 10px 10px 10px 10px;border-radius: 10px;box-shadow: 10px 10px 10px yellow;}.div4{width: 1300px;height: 300px;}.ul1{height: 100px;background: rgba(248, 246, 246, 0.78);margin: 0;}.ul1 li{display: inline-block;}.ul1 li a{font:normal 600 40px/50px Arial;color: red;}/* 浮动2--解决父级元素塌陷的问题*/#father{border: 2px dashed red;}#father:after{content: '';display: block;clear: both;}.layer01{border:2px solid #5ccd6b;margin:5px;display: inline-block;float: left;}.layer02{border:2px solid #cdb15c;margin: 5px;display: inline-block;float:right;}.layer03{border:2px solid #7d3fc4;margin:5px;display: inline-block;float:right;}.layer04{border:2px solid #7d3fc4;margin:8px;font:normal 600 20px/23px Arial;display: inline-block;float:left;clear:both;}/*------------------------定位 相对定位、绝对定位、固定定位---------------------*/#id06{font:normal 600 18px/19px Arial;color:red;position: relative;right:-50px;}#id07{position: absolute;top:3750px;z-index: -1;}/* #id08{font:normal 600 20px/21px Arial;color: #c800ff;background: #ffc800;position:fixed;top:0px;left:0px;right:0px;bottom:0px;padding: 5px;border: 2px solid red;}*/.id08{position: -webkit-sticky;position: sticky;top: 0px;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;}/*----------------- 方块定位练习----------*/.homeWork01{width: 250px;height: 250px;font:normal 600 15px/18px Arial;background: #a7317b;color: #f0f1f0;float: left;text-align: center;line-height: 250px;}.work01 a{text-decoration: none;color:red;}.homeWork02{width: 250px;height: 250px;font:normal 600 15px/18px Arial;background: #a7317b;color: #f0f1f0;float: right;text-align: center;line-height: 250px;}.homeWork03{width: 250px;height: 250px;font:normal 600 15px/18px Arial;background: #a7317b;color: #f0f1f0;clear: both;text-align: center;line-height: 250px;margin: 0 auto;}.homeWork04{width: 250px;height: 250px;font:normal 600 15px/18px Arial;background: #a7317b;color: #f0f1f0;float: left;text-align: center;line-height: 250px;}.homeWork05{width: 250px;height: 250px;font:normal 600 15px/18px Arial;background: #a7317b;color: #f0f1f0;float: right;text-align: center;line-height: 250px;}</style><!-- css引入的第二种方式:内容和表现分离--><!-- <link rel="stylesheet" href="style.css">--></head>
<body>
<div><h1>狂神说java系列，CSS3的学习</h1><h2>三大基本选择器</h2><p>三大基本选择器，标签选择器demo---style样式测试----font属性顺序--可以按顺序设置如下属性</p><p class="class1">三大基本选择器，calss选择器的demo-----id选择器>类选择器>标签选择器</p><p id="id01">三大基本选择器，id选择器的demo-------id选择器>类选择器>标签选择器</p><p id="id02">三大基本选择器的优先级：id选择器>类选择器>标签选择器</p>
</div>
<div><p class="css01"><span>link和导入的生效的优先级------css样式生效的优先级是：就近原则</span><span>1.link属于HTML标签，而@import是CSS提供的一种方式</span></br><span>2.@import有次数限制，只能引入31次</span></br><span>3.当页面被加载时，link引用的CSS会同时被加载，而@import引用的CSS则是等待主页面全部被加载完后才会被加载，所以当网速较慢时，可能会只出现页面而没有样式，等一段时间后样式才会被加载出来</span></br><span>4.@import 只能在IE5以上才能使用，否则不识别，而link则没有这个问题</span></br><span>5.当使用javascript控制DOM(document.styleSheets)去改变样式时，只能使用link，DOM不能控制@import</span></br></p>
</div>
<div><p class="css02"><p id="brother"></p><span>高级选择器</span></br><span>1、相邻兄弟选择器（匹配指定元素的相邻【下一个】兄弟元素）</span></br><span>2、通用兄弟选择器（匹配到某元素【后面的】 【所有指定】兄弟元素）</span></br><span id="attribute">3、属性选择器 (属性选择器可以根据元素的属性及属性值来选择元素。)</span></br><span>4、<em>CSS 后代选择器</em>（后代选择器可以选择作为某元素后代的元素。）</span></br><span><strong>5、CSS</strong> <strong>子元素选择器</strong>（子元素选择器（Child selectors）只能选择作为某元素子元素的元素。）</span></br><span>6、结构伪类选择器<p>1、:first-child 选择元素中的第一个子元素。</p><p>2、:nth-child(n) 定位某个父元素的一个或多个特定的子元素。其中 n 是其参数。n 取值如下：</p></span></br></p>
</div>
<div><h1 id="work01">属性选择器练习，八个方块填色</h1>
</div><div><a href="www.baidu.com" class="links item first" id="first">1</a><a href="www.kuangstudy.com" class="links item active" target="_blank" title="狂神说Java">2</a><a href="www.image/123.jpg" class="links item">3</a><a href="www.image/123.npg" class="links item">4</a><a href="www.image/122.jpg" class="links item">5</a><a href="www.image/666.jpg" class="links item">6</a><a href="www/image/777.jpg" class="links item">7</a><a href="www/image/888.jpg" class="links item">8</a>
</div>
<div class="css03"><h1>文本样式练习</h1><p id="id03">该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color属性。段落缩进、对齐，并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。text-indent 属性用于指定文本第一行的缩进。letter-spacing 属性用于指定文本中字符之间的间距。</p>
</div><div><h1>图片和字体对齐</h1><p><img src="https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20181117/e6d62d5178044221a0e32ab65f85bd14.jpeg"alt="天海佑希" class="center" height="150px" width="150px"><span>1985年以第一名成绩考入宝冢音乐学校，1987年毕业后加入宝冢歌剧团。</span></p>
</div><div><h1>超链接伪类</h1><p><a href="#top"><img src="https://static001.infoq.cn/resource/image/22/7a/225fbf05add13cf24dd72983e0f9e47a.jpeg"alt="码出高效" height="150px" width="150px" id="id05"></a></br></p><p><a href="#top">名字：码出高效</a></br></p><p><a href="#top">作者：孤尽</a></br></p><P><a href="#top">价格：¥99</a></br></P></div>
<div><h1>列表</h1>
</div>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a>  <a href="#">音像</a>  <a href="#">数字商品</a></li><li><a href="#">家用电器</a>  <a href="#">手机</a>  <a href="#">数码</a></li><li><a href="#">电脑</a>  <a href="#">办公</a></li><li><a href="#">家居</a>  <a href="#">家装</a>  <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>  <a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a>  <a href="#">钟表</a>  <a href="#">珠宝</a></li><li><a href="#">食品饮料</a>  <a href="#">保健食品</a></li><li><a href="#">彩票</a>  <a href="#">旅行</a>  <a href="#">充值</a>  <a href="#">票务</a></li></ul>
</div><div><h1>图片背景--垂直排列</h1>
</div>
<div class="div1">
</div><div><h1>渐变</h1>
</div>
<div class="div2"><h3>渐变背景</h3>
</div><div><h1>盒子模型</h1>
</div>
<div class="div3"><h2 id="vip2">会员登录</h2><form action="post" class="form"><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="password"></div></form>
</div>
<div><h1>浮动1</h1>
</div>
<div class="div4"><ul class="ul1"><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="#">联系我们</a></li></ul>
</div>
<div><h1>浮动2</h1>
</div>
<div id="father"><div class="layer01"><img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f4af.png" alt=""></div><div class="layer02"><img src="http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg" alt=""></div><div class="layer03"><img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f601.png" alt=""></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</div>
</div><div><h1>定位（相对、绝对、固定）</h1>
</div>
<div class="sticky"><p id="id06">relative相对定位元素的定位是相对其正常位置。</p><p id="id07"><img src="http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg" alt=""></p><div class="id08"><p>position: sticky; 基于用户的滚动位置来定位</p></div>
</div><div><h1>方块定位练习</h1>
</div>
<div class="work01"><div class="homeWork01"><a href="#work" id="href01">链接1</a></div><div class="homeWork02"><a href="#work">链接2</a></div><div class="homeWork03"><a href="#work">链接3</a></div><div class="homeWork04"><a href="#work">链接4</a></div><div class="homeWork05"><a href="#work">链接5</a></div>
</div>
</body>
</html>```狂神说Java CSS3讲解综合代码相关推荐
- 厚积薄发打卡Day24 ：狂神说Java之注解与反射＜全网最全(代码+笔记)＞
原视频地址: [狂神说Java]注解和反射,强烈推荐大家学习 什么是注解 什么是注解? Annotation是从JDK5.0开始引入的新技术. Annotation的作用: 不是程序本身,可以对程序作 ...
- java网络编程技术学习笔记（b站【狂神说Java】网络编程实战讲解）
b站视频链接:[狂神说Java]网络编程实战讲解 文章目录 网络编程 1.1.概述 1.2.网络通信的要素 1.3.IP 1.4.端口 1.5.通信协议 1.6.TCP 文件发送 1.7.UDP 1. ...
- Java对象，Map，List，Set数组等相互转换大全（详细讲解,附代码，讲解案例）
Java对象,Map,List,Set数组等相互转换大全(详细讲解,附代码,讲解案例) Java对象 转 JSON字符串 JAVA对象转MAP Map转java对象 List转map List和Map ...
- java编写螺旋矩阵讲解_Java如何实现螺旋矩阵 Java实现螺旋矩阵代码实例
本篇文章小编给大家分享一下Java实现螺旋矩阵代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时 ...
- 厚积薄发打卡Day26：狂神说Java之JUC并发编程＜代码+笔记＞（上）
前言: 学习视频来源:[狂神说Java]JUC并发编程最新版通俗易懂 一个十分优秀且励志的技术大牛+Java讲师,十分推荐他的频道:遇见狂神说
- 厚积薄发打卡Day25 ：狂神说Java之多线程详解＜全网最全(代码+笔记)＞
概述 视频来源:[狂神说Java]多线程详解 强烈推荐,
- 【狂神说Java】Vue学习笔记01：前端知识体系
本文根据B站[狂神说Java]vue系列视频整理,如需观看视频,请点击链接跳转 [狂神说Java]Vue视频 2.前端知识体系 想要成为真正的"互联网Java全栈工程师"还有很长的 ...
- Java入门学习笔记[狂神说Java]
写在前面: 本文根据B站狂神说Java 与菜鸟教程 整理而来,仅供个人学习使用,如有侵权,请联系删除. 文章目录 IDEA使用 Java基础01:注释 Java基础02:数据类型 Java基础03:类 ...
- 【狂神说Java】视频笔记
视频:狂神说Java 预科 (P7-12) 什么是计算机 Computer:全称电子计算机,俗称电脑. 能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备. 由硬件和软件所组成. 常见的形式 ...
最新文章
- CVD和ALD薄膜沉积技术应用领域
- SQL CASE When THEN END 行列转换，复杂查询
- T-SQL常用字符串函数
- 只要你懂为啥有人爱砍传奇，就能明白《逃离塔科夫》为何会成功
- python人脸对比相似度_python人脸对比
- Ehab and Prefix MEXs CodeForces - 1364C（思维）
- java dos平台压缩_Dos命令 压缩 解压缩
- python 日志不会按照日期分割_django实现日志按日期分割
- memcached部署安装文档
- cv2不能读取中文路径
- Linux 安装JDK详细步骤
- MySQL 调优工具
- 参考文献，bib文件格式
- 【数字图像处理】图像感兴趣区域与图像放大与缩小
- 基于HTML5移动app开发教程一
- 详解区块链（很详很长）
- 关于阿里巴巴开发手册不得使用外键与级联，一切外键概念必须在应用层解决的疑惑
- SQL Server 2016 COMPRESS 和 DECOMPRESS 函数
- parameter缩略语_常用参数缩写
- PCB 多层板为什么都是偶数层？