python之路41 前端頁面嘗試 醜出新高度
阿新 • • 發佈：2022-12-03
邊框
p {/* 左邊 */ font-size: 48px; border-left-width: 5px; border-left-style: dotted; /*點點邊框*/ border-left-color: #0000ff; } p {/* 頂部 */ font-size: 48px; border-top-width: 10px; border-top-style: solid; /* 框框邊框 */ border-top-color: green; } 右側:right 底部:bottom 簡寫: border-bottom:coral 10px solid; border-left:coral 10px dotted; border-right:dashed 10px red; /*槓槓邊框*/ 再次簡寫: border:10px dashed orange; /*邊框一致*/ ps:後面三個引數順序無所謂 畫圓操作 .c1 { /*保持長寬一致*/ width: 400px; height: 400px; border:10px solid blue; border-radius: 100%; }
display
"""行內標籤是無法設定長寬 只有塊兒級可以設定"""
display:none 徹徹底底的隱藏標籤(頁面上不會顯示也不會保留標籤的位置)
visibility: hidden 隱藏的不徹底
盒子模型
我們可以將標籤看成是一個盒子(快遞盒) 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; } <div class="c1 clreafix" > <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> 誰塌陷了 就給誰新增clearfix樣式類就可以了 ps:瀏覽器會優先展示文字內容(如果被擋住)
溢位
overflow: hidden; /*多的清楚*/
overflow: auto; /*收縮滾動*/
overflow: scroll; /*上下左右滾動*/
圓形頭像:
<style>
body{
background-color: darkgrey;
}
div{
height: 200px;
width: 200px;
border: 5px solid yellow;
border-radius: 100%;
overflow: hidden;
}
div img{
max-width: 100%;
}
</style>
<body>
<div>
<img src="https://img2.baidu.com/it/u=1479070112,180917387&fm=253&fmt=auto&app=138&f=JPEG?w=313&h=500" alt="">
</div>
</body>
定位
標籤在預設情況下都是無法通過定位的引數來移動針對定位有四種狀態
1.static靜態(標籤預設的狀態 無法定位移動)
2.relative相對定位(基於標籤原來的位置)
3.absolute絕對定位(基於某個定位過的父標籤做定位)
4.fixed固定定位(基於瀏覽器視窗固定不動)
div{
background-color: red;
width: 200px;
height: 200px;
left: 100px;
top: 200px;
position: relative; /* 改變相對位置*/
}
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 200px;
width: 200px;
position: absolute;
top:100px;
left:100px;
}
<!--<div></div>-->
<div class="c1">購物車
<div class="c2">很窮 購物車空空如也!!!!</div>
</div>
模擬色塊 固定定位:
.c1 {
border: 5px solid black;
height: 200px;
width: 200px;
position: fixed;
right: 100px;
bottom:100px;
}
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: yellow"></div>
<div style="height: 1000px;background-color: green"></div>
<div class="c1"> 雨後彩虹 唧唧咋咋</div>
z-index
彈窗登入:
<style>
body{
margin:0;
}
.cover{
background-color: rgba(127,127,127,0.5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: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;
}
</style>
<div>我在最下面</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>
username:
<input type="text">
</p>
<p>
password:
<input type="text">
</p>
</form>
</div>
附贈一個調透明度的:opacity
<div style="opacity: 0.5;">嘿嘿嘿</div>
<div style="background-color: rgba(0,0,0,0.5);">哈哈哈哈
</div>
部落格頁面搭建
1.分享頁面結構
利用佈局標籤div和span搭建架子(和python一樣)
2.先編寫網頁骨架
HTML
3.再編寫CSS
4.最後編寫JS
自己嘗試搭建了個小頁面：直接醜出新高度 字型太大了 可以修改一下
HTML塊程式碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<!-- 頭像區開始-->
<div class="blog-avatar"><img src="https://img1.baidu.com/it/u=2389183760,3266356431&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=499" alt="">
</div>
<!-- 頭像區結束-->
<div class="blog-title">
<span>西安美女</span>
</div>
<div class="blog-info">
<span>月刊越困月刊越困</span>
</div>
<div class="blog-link">
<ul>
<li><a href="">聯絡</a></li>
<li><a href="">微信</a></li>
<li><a href="">部落格</a></li>
</ul>
</div>
<div class="blog-course">
<ul>
<li><a href="">#擒拿手</a></li>
<li><a href="">#pppppp</a></li>
<li><a href="">#亂鬥氣體原來</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div><div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div><div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div><div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div><div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div><div class="article-list">
<div class="article-title">
<span class="title">論戰鬥之道</span>
<span class="date">2022/12/03</span>
</div>
<div class="article-desc">
<span>晚睡早起練功 飛禽晚上 廢寢忘食</span>
</div>
<div class="article-end">
<span> %劈里啪啦</span>
<span>吭哧吭哧</span>
</div>
</div>
</div>
</body>
引入CSS塊程式碼
/* 前端頁面樣式表*/
/* 頁面通用樣式*/
body{
margin:0;
background-color: #eee;
}
a{
text-decoration: none;
}
ul{
list-style-type:none ;
padding-left: 0;
}
/* 首頁左側樣式*/
.blog-left{
float:left;
width: 20%;
height: 100%;
background-color: #4e4e4e;
position:fixed;
left:0;
top:0;
}
.blog-avatar{
border: 3px solid yellow;
height: 100px;
width: 100px;
border-radius: 100%;
margin:10px auto;
overflow: hidden;
}
.blog-avatar img {
max-width: 100%;
}
.blog-title, .blog-info{
color: darkgray;
text-align: center;
margin: 10px auto;
}
.blog-link, .blog-course{
text-align: center;
margin: 20px auto;
}
.blog-link,ul>li .blog-course ul>li{
padding: 20px;
}
.blog-link a, .blog-course a{
color:darkgray;
font-size:16px;
}
.blog-link a:hover, .blog-course a:hover{
color:white;
}
/* 首頁右側樣式*/
.blog-right{
float:right;
width: 80%;
height: 100%;
}
.article-list{
background-color: white;
margin: 20px 50px 20px 20px;
box-shadow: 20px 20px 20px rgba(0,0,0,0.7);
}
.article-list .article-title .title{
font-size: 36px;
border-left: 10px solid red;
padding-left: 10px;
}
.article-list .article-title .date{
font-size: 10px;
font-weight: bolder;
float: right;
margin: 20px 20px;
}
.article-desc {
font-size: 16px;
font-weight: lighter;
text-indent: 10px;
border-bottom: 1px solid black;
}
.article-end {
padding: 10px 10px 10px 10px;
}
做出的效果是這樣的：