CSS基础——边框、盒子模型、浮动、定位、blog页面搭建
一、边框
border-left-width: 5px;
border-left-style: dotted;
border-left-corlor: black;
border-left: 3px solid black;
border: 10px solid black;
/*画圆*/
border-radius: 50%;
二、display属性
/*
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。
*/
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底
none：隐藏对象
inline： 指定对象为行内元素
block： 指定对象为块元素
inline-block：指定对象为行内块元素
table-cell：指定对象为表格单元格
flex：弹性盒
inline转块级元素
三、盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
四、浮动
浮动就是用来做页面布局的
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响
clear
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after {
content: '';
display: block;
clear: both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
五、溢出
div {
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
六、定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
七、z-index
body {
margin: 0;
}
.cover {
background-color: rgba(127,127,127,0.5);
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
z-index: 101;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
八、简单的blog界面搭建
8.1 html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blog.css">
<script src="blog.js"></script>
</head>
<body onload="get_time()">
<div id="all">
<!-- 左栏目 -->
<div class="left_box">
<!-- 头像 -->
<div class="img_info">
<span>
<img src="
">
</span>
</div>
<!-- Blog name -->
<div class="user_info">
<span>
欢迎来到：索隆的Blog
</span>
</div>
<!-- 个性签名 -->
<div class="user_info">
<span id="">
负剑远游行，归来仍少年
</span>
</div>
<!-- 相关信息 -->
<div class="user_mag">
<ul>
<li>
<a href="">about me</a>
</li>
<li>
<a href="">WeChat</a>
</li>
<li>
<a href="">Telephone</a>
</li>
</ul>
</div>
<!-- 技术栈 -->
<div class="user_skill">
<ul>
<li>
<a href="">Python</a>
</li>
<li>
<a href="">Java</a>
</li>
<li>
<a href="">Golang</a>
</li>
</ul>
</div>
</div>
<!-- 右栏目 -->
<div class="right_box">
<!-- 文章列表 -->
<div class="right_title">
<!-- 标题 -->
<span id="right_title">
出师表
</span>
<!-- 实时日期 -->
<div id="data_time"></div>
<!-- 文章内容 -->
<div class="article">
<a href="https://hanyu.baidu.com/shici/detail?pid=3bae8ab343d84e359bea52e48db609d2&from=kg0">
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
</a>
</div>
<!-- 标签 -->
<hr>
<div class="">
<span class="tag">
# 三国时期
</span>
<span class="tag">
# 诸葛亮
</span>
</div>
</div>
<div class="right_title">
<!-- 标题 -->
<span id="right_title">
出师表
</span>
<!-- 实时日期 -->
<div id="data_time"></div>
<!-- 文章内容 -->
<div class="article">
<a href="https://hanyu.baidu.com/shici/detail?pid=3bae8ab343d84e359bea52e48db609d2&from=kg0">
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
</a>
</div>
<!-- 标签 -->
<hr>
<div class="">
<span class="tag">
# 三国时期
</span>
<span class="tag">
# 诸葛亮
</span>
</div>
</div>
<div class="right_title">
<!-- 标题 -->
<span id="right_title">
出师表
</span>
<!-- 实时日期 -->
<div id="data_time"></div>
<!-- 文章内容 -->
<div class="article">
<a href="https://hanyu.baidu.com/shici/detail?pid=3bae8ab343d84e359bea52e48db609d2&from=kg0">
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
</a>
</div>
<!-- 标签 -->
<hr>
<div class="">
<span class="tag">
# 三国时期
</span>
<span class="tag">
# 诸葛亮
</span>
</div>
</div>
<div class="right_title">
<div class="right_title">
<!-- 标题 -->
<span id="right_title">
出师表
</span>
<!-- 实时日期 -->
<div id="data_time"></div>
<!-- 文章内容 -->
<div class="article">
<a href="https://hanyu.baidu.com/shici/detail?pid=3bae8ab343d84e359bea52e48db609d2&from=kg0">
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
</a>
</div>
<!-- 标签 -->
<hr>
<div class="">
<span class="tag">
# 三国时期
</span>
<span class="tag">
# 诸葛亮
</span>
</div>
</div>
<div class="right_title">
<div class="right_title">
<!-- 标题 -->
<span id="right_title">
出师表
</span>
<!-- 实时日期 -->
<div id="data_time"></div>
<!-- 文章内容 -->
<div class="article">
<a href="https://hanyu.baidu.com/shici/detail?pid=3bae8ab343d84e359bea52e48db609d2&from=kg0">
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
</a>
</div>
<!-- 标签 -->
<hr>
<div class="">
<span class="tag">
# 三国时期
</span>
<span class="tag">
# 诸葛亮
</span>
</div>
</div>
<div class="right_title">
</div>
</div>
</body>
</html>
8.2 css部分
@charset "utf-8"
/* 清除所有的外边距、内边距 */
* {
margin: 0;
padding: 0;
}
/* 设置body背景颜色 */
body {
display: flex;
flex-direction: column;
background-color: rgba(222,203,0,0.7);
}
/* 清空所有a标签的下划线 */
a {
text-decoration: none;
color: rgba(128,147,170,0.5)
}
/* 清空所有的无序列表的样式 */
ul {
list-style-type: none;
}
/* 设置左边box */
.left_box{
float: left;
width:45vh;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.8)
}
/* 设置头像 */
.left_box .img_info{
margin-top: 15vh;
margin-left: 12vh;
/* 边框元素 、画圆*/
border: 5px solid rgba(123,123,123,0.5);
height: 100px;
width: 100px;
border-radius: 35%;
/* 照片溢出填充 */
overflow: hidden;
}
/* 设置照片显示 */
.img_info img{
max-width: 100%;
}
/* 设置用户属性 */
.left_box .user_info{
margin-left: 5vh;
margin-top: 3vh;
font-size: 20px;
color: rgba(222,128,110,0.5)
}
/* 设置用户信息 */
.left_box .user_mag{
margin-left: 8vh;
margin-top: 10vh;
}
.left_box .user_mag>ul>li{
margin-top: 2vh;
}
/* 设置用户技能 */
.left_box .user_skill{
margin-left: 8vh;
margin-top: 8vh;
}
.left_box .user_skill>ul>li{
margin-top: 2vh;
}
/* 设置右边box */
.right_box{
width: 140vh;
height: 100%;
float: right;
}
.right_title{
margin-top: 10vh;
}
#data_time{
float: right;
}
.article>a{
color: rgba(23, 120, 100, 0.5);
}
8.3 js部分
function get_time(){
var date=new Date();
var time=date.toLocaleDateString();
document.getElementById("data_time").innerHTML=time;
}
setInterval("get_time();",1000);
8.4效果图
浙公网安备 33010602011771号