HTML+CSS入门
CSS概述
CSS指层叠样式表 (Cascading Style Sheets)，用来定义HTML网页中的内容用什么样式来显示。
HTML: 指定网页显示的内容
CSS: 指定内容显示的样式
CSS入门案例
入门案例 黑马程序员
CSS引入方式
CSS需要和HTML中结合起来使用，一共有三种结合方式
- 内联样式
Hello World
- 内部样式
内部样式需要在标签中定义标签，然后在内部定义样式。
div1div2
- 外部样式
外部样式是把样式专门写成一个.css文件，然后通过文件路径将样式引入到HTML文件中。当多个网页需要使用相同的样式时，推荐使用这种方式。
定义CSS样式文件，文件路径为css/a1.css
div{color: red;font-size: 20px;
}
将样式文件引入到HTML文件中
引入方式3
div1div2
CSS选择器
选择器是用来选择HTML指定的标签，然后统一对选中的标签设定样式。
- 常见的选择器有下面几种
1.元素选择器： 通过标签名来选择
2.id选择器：通过id属性值进行选择
3.类选择器：通过class属性值进行选择
4.属性选择器：通过指定的属性名和属性值进行选择
5.伪类选择器：通过对操作状态进行选择(未访问、悬停、访问中、访问后)
6.后代选择器：通过标签的嵌套关系进行选择
7.组合选择器：组合几种选择器进行选择
元素选择器
/*选择所有div元素，样式为红色*/
div{color: red;
}
id选择器
/*选择所有id属性值为d1的元素，颜色为绿色*/
#d1{color: green;
}
类选择器
/*选择所有class属性值为cls的元素，颜色为蓝色*/
.cls{color: blue;
}
属性选择器
/*选择所有具有type属性的元素，颜色为红色*/
[type]{color: red;
}/*选择所有type属性值为password的元素，颜色为蓝色*/
[type=password]{color: blue;
}
伪类选择器
/*去除a标签的默认样式*/
a{text-decoration: none;
}/*a标签未访问的状态*/
a:link{color: magenta;
}/*a标签已访问的状态*/
a:visited{color: gray;
}/*a标签鼠标悬浮的状态*/
a:hover{color: red;
}/*a标签已选中的状态*/
a:active{color: yellow;
}注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
后代选择器
/*先选中class值为center的元素，再找到他下面的子元素li*/
.center li{color:red
}
组合选择器
以上所有的选择器都可以组合起来一起使用，多个选择器需要用,进行分割。
/*选中class为center的元素的子元素li，和id值为d1的元素*/
.center li,#d1{color:yellow
}
黑马头条案例
1.案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4nUlEAmF-1678414323009)(assets/image-20201202174450120.png)]
2.所需样式
- 边框样式
div{/*边框：宽度5px,实线,黑色*/border: 5px solid black;/*设置上边框: 宽度5px 实线,黑色*/border-top: 5px solid black;/*设置左边框: 宽度5px 双线,红色*/border-left: 5px double red;/*设置右边框: 宽度5px 点线,蓝色*/border-right: 5px dotted blue;/*设置下边框: 宽度5px 虚线,品红*/border-bottom: 5px dashed pink;/*设置边框的弧度*/border-radius: 25px;/*宽度*/width: 150px;/*高度*/height: 150px;
}
- 文本样式
div{/*文本颜色*/color: #ff0000;/*字体*/font-family: 宋体;/*字体大小*/font-size: 25px;/*下划线 none：无 underline：下划线 overline：上划线 line-through：删除线*/text-decoration: none;/*水平对齐方式 left：居左 center：居中 right：居右*/text-align: center;/*行间距*/line-height: 60px;
}span{/*文字垂直对齐 top：居上 bottom：居下 middle：居中 百分比*/vertical-align: 50%;
}
3.顶部导航栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evVMA9LO-1678414323010)(assets/image-20201202130936924.png)]
- HTML标签
- CSS样式
/*顶部导航条*/
.top{background: black; /*背景色*/line-height: 40px; /*行高*/text-align: right; /*文字水平右对齐*/font-size: 20px; /*字体大小*/padding-right: 20px; /*内边距20像素*/
}.nav{line-height:40px;
}/*顶部超链接颜色*/
.top a{color: white;
}
/*其他超链接颜色*/
a{text-decoration: none;color: black;
}
/*超链接悬浮状态*/
a:hover{color: red;
}
4.左侧分享图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UbyxXR0-1678414323011)(assets/image-20201202132759083.png)]
- HTML标签
- CSS样式
/*左侧分享样式*/
.left{width: 20%; /*宽度20%*/float: left; /*左浮动*/text-align: center; /*内容水平居中*/
}/*左侧图片样式*/
.left img{width: 38px; height: 38px;
}/*左侧文字样式*/
.left span{vertical-align: 50%; /*垂直居中*/
}
5.中间正文
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FGRE4EA-1678414323012)(assets/image-20201202132759083.png)]
- HTML标签
支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？
作者：suihao 2088-08-08
支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
- 蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。
- 微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大
- 蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
一、芝麻分600以上福利之信用购。网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
二、芝麻分600以上福利之信用免押。芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
三、芝麻分600以上福利之国际驾照。我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
- CSS样式
.center{float: left;width: 60%;
}
6.右侧广告图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50VLkYDR-1678414323013)(assets/image-20201202132759083.png)]
- HTML标签
![]()
![]()
![]()
![]()
![]()
![]()
- CSS样式
.right{width: 20%;float: left;
}
7.底部链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxrI2tsQ-1678414323017)(assets/image-20201202133251357.png)]
- HTML标签
- CSS样式
/*底部页脚超链接样式*/
.footer{clear: both; /*清除浮动*/background: blue; /*背景色*/text-align: center; /*文字水平居中对齐*/line-height: 25px;
} /*底部页脚超链接文字颜色*/
.footer a{color: white;
}
登录页面案例
1.案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4B03daD-1678414323018)(assets/image-20201202134042867.png)]
2.表格标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rHu56KE-1678414323019)(assets/image-20201202135229957.png)]
姓名 性别 年龄 数学 语文 张三 男 23 90 李四 24 95 98 总分数： 373
3.所需样式
- 背景图片样式
/*
background-repeat: 背景图重复; no-repeat: 不重复repeat-x：水平重复 repeat-y：垂直重复 repeat：水平+垂直重复
*/
body{background: url("../img/bg.jpg");background-repeat: repeat;
}
- 轮廓样式
/*
outline: 设置轮廓样式double：双实线 dotted：圆点 dashed：虚线 none：无
*/
input{outline: none;
}
- 元素显示演示
/*
dispplay: 设置元素显示样式inline：内联元素(无换行、无长宽)block：块级元素(有换行) inline-block：内联元素(有长宽) none：隐藏元素
*/
div{display: inline-block;width: 100px;
}
4.盒子模型
在CSS样式中万物皆盒子，通过设置元素的边框以及元素内容的边距，从而实现元素在页面中的布局。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bGGSAaV8-1678414323020)(assets/image-20201202141335181.png)]
margin: 70px 35px 30px 65px; /*上,右,下,左外边距*/
margin-top: 20px; /*上外边距*/
margin-bottom: 20px; /*下外边距*/
margin-left: 20px; /*左外边距*/
margin-right: 20px; /*右外边距*/ padding: 50px 50px 20px 25px; /*上,右,下,左内边距*/
padding-top: 20px; /*上内边距*/
padding-bottom: 20px; /*下内边距*/
padding-left: 20px; /*左内边距*/
padding-right: 20px; /*右内边距*/
5.顶部Logo和表单实现
- HTML标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8AmAnTk-1678414323021)(assets/image-20201202150847899.png)]
![]()
- CSS样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bK7rS0Bj-1678414323022)(assets/image-20201202155417986.png)]
/*背景图片*/
body{background: url("../img/bg.png");
}/*设置表单的背景颜色*/
.center{background: white; /*背景色*/width: 40%; /*宽度*/margin: auto; /*水平居中外边距*/margin-top: 100px; /*上外边距*/border-radius: 15px; /*边框弧度*/text-align: center; /*文本水平居中*/
}/*表头样式*/
thead th{font-size: 20px; /*字体大小*/color: orangered; /*字体颜色*/
}/*标题提示信息样式*/
tbody label{font-size: 20px;
}/*标题输入框样式*/
tbody input{border: 1px solid gray;border-radius: 10px;width: 90%;height: 40px;outline: none;
}/*表底按钮样式*/
tfoot button{width: 95%; /*宽95%*/height: 40px; /*高40像素*/background: crimson; /*背景颜色*/border-radius: 5px; /*边框弧度*/border: 1px solid crimson; /*边框样式*/
}/*表行高度*/
table tr{height: 60px;
}
6.页脚实现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4mqOTRxs-1678414323023)(assets/image-20201202161410213.png)]
- HTML标签
- CSS样式
/*页脚样式*/
.footer{text-size:15px
}/*超链接样式*/
a{text-decoration: none; /*去除超链接的下划线*/color:blue; /**/
}