css圖片文字

時間 2019-11-26

標籤 css 圖片文字欄目 CSS 简体版

原文原文鏈接

1.瀏覽器是把 html 和 css 一塊兒下載並執行的，計算機裏把兩件事情同時作異步加載。計算機中的同步異步和咱們生活中的正好是相反的。

補充：

同步，是全部的操做都作完，才返回給用戶結果。即寫完數據庫以後，在相應用戶，用戶體驗很差。

異步，不用等全部操做等作完，就相應用戶請求。即先相應用戶請求，而後慢慢去寫數據庫，用戶體驗較好。

2.通配符：*{padding:0; margin:0;}

4.css 權重，優先級大小排序：括號裏寫具體的權重值

!important（Infinity）>行間樣式（1000）>id（100）>class/屬性/僞類（10）>標

籤/僞元素（1）>通配符（0）

寫頁面總結：

1.css圖片和文字同一行顯示

問題其實很好解決，只要設定img標籤的vertical-align CSS屬性就行了，代碼以下：css

<img src="images/untitled.png" style="width:30px;height:30px;padding:0px;margin:0px;vertical-align:middle;"/>
<span>居中顯示的文字</span>

2.搜素框架搜索圖標，還有提示文字

html代碼：html

1 <i class="icon-search"></i>   搜索
2 <input type="text" class="inputText" placeholder=" 你們都在搜索'奧迪Q7'" >
3 <i class="icon-speech" ></i>  語音

css代碼：web

 1 header input {
 2 border-style:none; //去掉input默認樣式
 3 width: 83%;
 4 height: 30px;
 5 margin-left: 3%;
 6 border-radius: 5px;
 7 background-color: #EEEDED;
 8 border: 1px solid #8e8e8e;
 9 text-indent: 20px;
10 outline: none;
11 }
12 
13 header .icon-search {
14 background: url(../img/search.png) no-repeat;
15 width: 21px;
16 height: 21px;
17 position: absolute;
18 top: 20px;
19 left: 16px;
20 }
21 
22 header .icon-speech {
23 background: url(../img/speech.png) no-repeat;
24 width: 21px;
25 height: 21px;
26 position: absolute;
27 top: 20px;
28 left:78%;
29 }
30 
31 header .icon-remind {
32 background: url(../img/remind.png) no-repeat;
33 width: 22px;
34 height: 22px;
35 position: absolute;
36 top: 20px;
37 right: 15px;
38 transform: scale(1.5);
39 }

3.設置手機端input文本框提示文字大小數據庫

 1 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ 
 2 /*color:#666; 
 3 font-size:16px; */
 4 
 5 font-family: PingFangSC-Regular;
 6 font-size: 13px;
 7 color: #999593;
 8 text-align: left;
 9 line-height: 26px;
10 }

4.去除文本框邊框，背景色vim

background-color: transparent;
border: none;

5.上方圖片，下方文字佈局瀏覽器

html 微信

 1 <div class="login-way">
 2 
 3 <div id="wechat" class="subMenu text-center" data-src="">
 4 <img class="menu_img-wetchat" src="../../images/wechat.png" data-imgname="choosecar" />
 5 <div class="menu_name">微信</div>
 6 </div>
 7 <div id="QQ" class="subMenu text-center" data-src="">
 8 <img class="menu_img" src="../../images/QQ.png" data-imgname="choosecar" />
 9 <div class="menu_name">QQ</div>
10 </div>
11 <div id="weibo" class="subMenu text-center" data-src="">
12 <img class="menu_img-weibo" src="../../images/weibo.png" data-imgname="choosecar" />
13 <div class="menu_name">微博</div>
14 </div>
15 </div>

css框架

 1 .login-way{
 2 margin-top: 5%;
 3 height: 30px;
 4 /*border: 1px solid #0000FF;*/
 5 }
 6 
 7 .subMenu {
 8 width: 33%;
 9 float: left;
10 cursor: pointer;
11 }
12 
13 .menu_name {
14 height: 20px;
15 width: 100%;
16 line-height: 20px;
17 font-family: PingFangSC-Regular;
18 font-size: 10px;
19 color: #999593;
20 }
21 
22 img.menu_img {
23 height: 20px;
24 width: 17px;
25 }
26 
27 img.menu_img-wetchat {
28 width: 25px;
29 height: 20px;
30 }
31 
32 img.menu_img-weibo {
33 width: 22px;
34 height: 18px;
35 }
36 
37 img {
38 vertical-align: middle;
39 border: 0;
40 }
41 
42 .active {
43 color: #FFA129;
44 }
45 
46 .text-center {
47 text-align: center
48 }

css設置input 提示文字距離邊框距離異步

1 text-indent：{12px}

6.文本縮進
text-indent: 縮進距離
12px至關於一個文字距離ide

7.css 設置元素水平垂直居中

①彈性佈局

1 <div class="parent">
2 <div class="child">我只是個孩子</div>
3 </div>

 1 .parent {
 2 display: flex;
 3 justify-content: center;
 4 align-items: center;
 5 width: 100%;
 6 height: 200px;
 7 border: 1px solid #FF9900;
 8 /*margin: 0 auto;*/
 9 }
10 
11 .child {
12 width: 100px;
13 height: 100px;
14 border: 1px solid skyblue;
15 text-align: center;
16 vertical-align: middle;
17 }

②定位+轉化

<div class="parent">

<div class="child">Demo</div>

</div>

 1 .parent {
 2 
 3 position: relative;
 4 
 5 width: 400px;
 6 
 7 height: 400px;
 8 
 9 background: skyblue;
10 
11 }
12 
13 .child {
14 
15 position: absolute;
16 
17 left: 50%;
18 
19 top: 50%;
20 
21 transform: translate(-50%, -50%);
22 
23 width: 200px;
24 
25 height: 200px;
26 
27 background: pink;
28 
29 }

③ 單元格

<div class="parent">

<div class="child">單元格方式</div>

</div>

 1 .parent {
 2 
 3 display: table-cell;
 4 
 5 text-align: center;
 6 
 7 vertical-align: middle;
 8 
 9 width: 400px;
10 
11 height: 400px;
12 
13 background: skyblue;
14 
15 }
16 
17 .child {
18 
19 display: inline-block;
20 
21 width: 200px;
22 
23 height: 200px;
24 
25 background: pink;
26 
27 }

8.css 設置頭部，滾動條滾動時如何讓上面的標題固定不動

html :

頭部

<header>
<i class="icon-speech"></i>
<input type="text" class="inputText" placeholder="奧迪Q7">
<div class="cancelspan">取消</div>
</header>

內容div

<div class="content">
<div class="search">
<span class="logo">
<img src="../img/aodi.png"> 
</span>
<span class="name">奧迪</span>
<span class="pindao ">去品牌頻道> </span>
</div>
<div class="middle">
<!--div class="result"></div>-->
<!--<div class="result">
<div class="reslut-img">
<img src="../img/caroutside.png">
</div>
<div class="reslut-desc">
<div class="reslut-desc-brandname">奧迪Q7L 2.0T</div>
<div class="reslut-desc-brandprice">廠商指導價：68.38-96.28萬</div>
</div>
</div>
<div class="result">
<div class="reslut-img">
<img src="../img/caroutside.png">
</div>
<div class="reslut-desc">
<div class="reslut-desc-brandname">奧迪Q7L 2.0T</div>
<div class="reslut-desc-brandprice">廠商指導價：68.38-96.28萬</div>
</div>
</div>-->
</div>
<div class="recommended">
<p>智能推薦</p>
<div class="recommended-chancel"></div>
<!--<div class="result">
<div class="reslut-img">
<img src="../img/caroutside.png">
</div>
<div class="reslut-desc">
<div class="reslut-desc-brandname">奧迪Q7L 2.0T</div>
<div class="reslut-desc-brandprice">廠商指導價：68.38-96.28萬</div>
</div>
</div>-->
<!--<div class="result">
<div class="reslut-img">
<img src="../img/caroutside.png">
</div>
<div class='reslut-desc'>
<div class='reslut-desc-brandname'>奧迪Q7L 2.0T</div>
<div class='reslut-desc-brandprice'>廠商指導價：68.38-96.28萬</div>
</div>
</div>
<!--<div class="result">
<div class="reslut-img">
<img src="../img/caroutside.png">
</div>
<div class="reslut-desc">
<div class="reslut-desc-brandname">奧迪Q7L 2.0T</div>
<div class="reslut-desc-brandprice">廠商指導價：68.38-96.28萬</div>
</div>
</div>-->
</div>
</div>

css 樣式

header {
position: fixed; //固定定位
z-index: 10;
height: 50px;
line-height: 50px;
width: 100%;
color: #fff;
font-family: "PingFang-SC-Medium";
font-weight: 200;
font-size: 20px;
/*border: 1px solid #000000;*/
}


.content {
position: absolute; //絕對定位
top: 50px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
overflow-y: scroll;//滾動區域}

}

9.css設置img標籤在div垂直居中定位方式

html:

<div class="mui-divimg">
<img src="../../images/person_setup.png">
</div>

css:

.mui-divimg {
float: right;
/*text-align: center;
vertical-align: middle;*/
position: relative;
width: 40px;
height: 40px;
/*border:1px solid #FFFFFF;*/
}

.mui-divimg img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
/*vertical-align: middle;
width:20px;
height: 20px;
}

10.css實現一行文字居中，多行文字左對齊

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*當文字爲一行是，則P的寬度小於div的寬度，p標籤居中顯示在盒子內，文字也就居中了 ;當大於一行時，P的寬度和div的寬度是一致的 ,文字就居左對齊了*/
    .content {  width: 200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}
    /*display: inline-block使P的寬度根據文字的寬度伸縮 */
    .content p {  text-align: left;  display: inline-block  }
</style>
<body>
<div class="content">
    <p>內容只有一行居中</p>
</div>
<br>
<div class="content">
    <p>內容多行左對齊，內容多行左對齊</p>
</div>
</body>
</html>

②

11.設置div中兩個div相對左右居中

html代碼

<div class="mui-songlist">
<div class="mui-songlist-colletion">
<!--<img src="../../images/album3.jpg"> -->
</div>
<div class="mui-songlist-minesonglist"></div>
<div class="mui-songlist-minedownload"></div>
<div class="mui-songlist-recenrplay"></div>
</div>

css代碼

.mui-songlist{
margin: -5% auto;
height: 400px;
width: 90%;
border: 1px solid purple;
padding: 0 auto;
padding: 1% auto;
}

.mui-songlist div{
width: 48%;
height: 178px;
border: 1px solid red;
float: left;
margin: 1% 1%;//設置div標籤margin值
}

12.css中div 右邊顯示半圓

<div class="container-middle-right">
<div></div>
</div>

css

.container-middle-right div{
margin-left: 22%;
margin-top: 7%;
width: 78%;
height: 80%;
/* margin: 0 auto; */
padding: 0 auto;
background: #ec2e2e;
border-radius: 163px 0px 0px 163px;
border-radius: 163 0 50px 50px;
/* background-repeat: no-repeat; */
}

13.css去除圖片默認間隙

<div class="container-bottomimg">
　　<img src="../img/index-bottom-one.png" >
　　<img src="../img/index-bottom-two.png" >
　　<img src="../img/index-bottom-three.png" >
　　<img src="../img/index-bottom-four.png" >
</div>

css:

.container-bottomimg{
margin: 5% auto;
width:100%;
height:450px;
border:1px solid #008000;
letter-spacing:-800px;//<!--letter-spacing的值不管是負多少都不會產生重疊-->

}

14.css清除浮動

父級清浮動，就是在本身寬度是否肯定下，都能保證父級的高度剛恰好包裹子集

須要左右排列的block採用浮動佈局，且父級必定要清浮動

①：.浮動的標籤:after { content: ''; display: block; clear: both; }

②;.浮動標籤下一個要顯示的標籤(會受到他浮動影響的):before { content: ''; display: block; clear: both; }

15.瀑布流css實現

效果圖：

html

<div class="main">

//第一列
<div class="column-item">
<div class="box pl0">
<div style="height:352px;background:blue;">1</div>
<div style="height:392px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
<div style="height:405px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
</div>
</div>

//第二列
<div class="column-item">
<div class="box">
<div style="height:279px;background:rgb(133, 12, 106);">2</div>
<div style="height:478px;background:rgb(212, 149, 12);margin-top:10px;">1</div>
<div style="height:305px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
</div>
</div>

//第三列
<div class="column-item">
<div class="box">
<div style="height:396px;background:red;">2</div>
<div style="height:330px;background:pink;margin-top:10px;">3</div>
<div style="height:432px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
</div>
</div>

//第四列
<div class="column-item mg0">
<div class="box prl0">
<div style="height:380px;background:green;">3</div>
<div style="height:460px;background:pink;margin-top:10px;">3</div>
<div style="height:379px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
</div>
</div>
</div>

css:

<style>
body {
background: #eee;
}

* {
padding: 0;
margin: 0;
}

.main {
width: 1200px;
margin: 50px auto;
}

.main::after {
content: "";
display: block;
clear: both;
}

.main .column-item {
width: 1200px;
}
/*不用設置高度*/

.main .mg0 {
margin-right: 0;
}

.main .column-item .box {
float: left;
width: 292px;
/*=(1200-30)/4 = 292.5*/
padding: 0 5px;
}
/*關鍵點，由於column-item不設置高度，因此只要設置float:left;那麼全部的box就會向左邊浮動，獲得所需的4分列效果*/

.main .column-item .pl0 {
padding-left: 0;
}
/*頭尾兩邊都要清掉相應以便的padding,否則不會獲得4分等列效果*/

.main .column-item .prl0 {
padding-right: 0;
}


</style>

16.設置背景圖片大小尺寸

background: url(../img/nextBtnTop.png) 0 0 no-repeat;

background-size: 100% 69%;

17.css設置字體段落首行縮進，字體間距

效果

<div id="content">
<p>不少人拍海都說沒有感受,只能使用一些攝影技巧來彌補這一缺憾,本人第一-次拍海也和你們樣,直到無心間聽到張惠妹歌曲《聽海》, 才明白其中玄機，拍海要把大海當作戀人,用心去體會大海的情緒,平靜時如溫婉少女,含蓄時內斂深沉,激情時波濤洶涌,在配合合適的攝影技巧來表現,才能獲得想要的畫面效果。 </p>
</div>

css

#content p {
/* height: 30px; */
line-height: 2.3;
text-indent: 2em;     //首行縮進
color: #191919;
font-size: 16px;
font-family: "微軟雅黑";
width: 96%;
margin: 0 auto;
letter-spacing: 2px;  //字體間距
font-weight: 500;
}

18.設置盒子裏的幾個div兩側沒有間隙，幾個div之間有間隙

html：

<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
</div>

css:

#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content:space-between;
}

#main div {
width: 70px;
height: 70px;
}

19.用僞元素給字體下方加橫線

html:

<ul>
<li class="active">推薦</li>
<li>汽車</li>
<li>娛樂</li>
<li>游泳</li>
<li>美食</li>
<li>生活</li>
<li>設計</li>
</ul>

css:

.variety-title ul li {
float: left;
width: 13%;
font-size: 18px;
font-weight: 500;
text-align: left;
position: relative; //給li相對定位
}

.variety-title ul li.active {
color: #0f71bd;
font-weight: bold;
transition: 0.2s all linear;
}

.variety-title ul li.active::after {
content: "";                      //:after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
display: block;
position: absolute;        //div絕對定位
bottom: 6px;
left: 3px;
width: 21%;              //下劃線的寬度
height: 3px;             //下劃線的高度
background: #0f71bd;
}

20.頁面寫ul li標籤是，去除ul li默認css樣式，內外邊距，寫在css初始位置

ul,li{ 
padding:0;
margin:0;
list-style:none
}

20.css樣式優先級

css:

<style type="text/css">

.blue {
color: blue;
}
.red {
color: red;
}
</style>

html:

<div class="red blue">這是什麼顏色</div>
<div class="blue red">這是什麼顏色</div>

兩個div都是紅色。暫且用就近原則解釋，那個class樣式離html近，就用那個

21.複選框修改默認背景色以及打鉤的顏色

html:

<input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>

css:

.chk_1,.chk_2,.chk_3,.chk_4 {
display: none;
}

/*******STYLE 1*******/
.chk_1 + label {
background-color: #FFF;
border: 1px solid #C1CACA;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
border-radius: 5px;
display: inline-block;
position: relative;
margin-right: 30px;
}
.chk_1 + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_1:checked + label {
background-color: #E3E2E9; //背景色
border: 1px solid #92A1AC;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
color: #243441;
}

//打鉤的顏色

.chk_1:checked + label:after {
content: '\2714';
position: absolute;
top: -26px;
left: 0px;
color: #0C7BE3;
width: 100%;
text-align: center;
font-size: 1.4em;
padding: 1px 0 0 0;
vertical-align: text-top;
}

22.圓圈中帶數字

html:

<div class="comment-number">
<span>4</span>
</div>

css:

.comment-number {
position: absolute;
top: 19%;
margin-left: 16px;
/* right: 2%; */
/* left: 10px; */
width: 16px;
height: 18px;
background-color: #42ACFF;
border-radius: 25px;
}
.comment-number span{
width: 16px;
height: 18px;
line-height: 18px;
display: block;
color: #FFF;
font-size: 11px;
text-align: center;
}

23.文本兩端對齊，通常是登陸信息頁面

css：

div { width: 100px; padding: 0 10px; background: pink; margin-bottom: 10px; text-align-last:justify; /* 這是關鍵屬性 */}

html:

<div>帳號</div>
<div>密碼設置</div>
<div>手機號</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。