css图片和文字同一行显示
问题其实很好解决,只要设定img标签的vertical-align CSS属性就好了,代码如下:
- <img src="images/untitled.png" style="width:30px;height:30px;padding:0px;margin:0px;vertical-align:middle;"/>
- <span>居中显示的文字</span>
搜素框架搜索图标,还有提示文字
html代码:
<i class="icon-search"></i> 搜索
<input type="text" class="inputText" placeholder=" 大家都在搜索'奥迪Q7'" >
<i class="icon-speech" ></i> 语音
css代码:
header input {
border-style:none; //去掉input默认样式
width: 83%;
height: 30px;
margin-left: 3%;
border-radius: 5px;
background-color: #EEEDED;
border: 1px solid #8e8e8e;
text-indent: 20px;
outline: none;
}
header .icon-search {
background: url(../img/search.png) no-repeat;
width: 21px;
height: 21px;
position: absolute;
top: 20px;
left: 16px;
}
header .icon-speech {
background: url(../img/speech.png) no-repeat;
width: 21px;
height: 21px;
position: absolute;
top: 20px;
left:78%;
}
header .icon-remind {
background: url(../img/remind.png) no-repeat;
width: 22px;
height: 22px;
position: absolute;
top: 20px;
right: 15px;
transform: scale(1.5);
}
设置手机端input文本框提示文字大小
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
/*color:#666;
font-size:16px; */
font-family: PingFangSC-Regular;
font-size: 13px;
color: #999593;
text-align: left;
line-height: 26px;
}
去除文本框边框,背景色
background-color: transparent;
border: none;
上方图片,下方文字布局
html
<div class="login-way">
<div id="wechat" class="subMenu text-center" data-src="">
<img class="menu_img-wetchat" src="../../images/wechat.png" data-imgname="choosecar" />
<div class="menu_name">微信</div>
</div>
<div id="QQ" class="subMenu text-center" data-src="">
<img class="menu_img" src="../../images/QQ.png" data-imgname="choosecar" />
<div class="menu_name">QQ</div>
</div>
<div id="weibo" class="subMenu text-center" data-src="">
<img class="menu_img-weibo" src="../../images/weibo.png" data-imgname="choosecar" />
<div class="menu_name">微博</div>
</div>
</div>
css
.login-way{
margin-top: 5%;
height: 30px;
/*border: 1px solid #0000FF;*/
}
.subMenu {
width: 33%;
float: left;
cursor: pointer;
}
.menu_name {
height: 20px;
width: 100%;
line-height: 20px;
font-family: PingFangSC-Regular;
font-size: 10px;
color: #999593;
}
img.menu_img {
height: 20px;
width: 17px;
}
img.menu_img-wetchat {
width: 25px;
height: 20px;
}
img.menu_img-weibo {
width: 22px;
height: 18px;
}
img {
vertical-align: middle;
border: 0;
}
.active {
color: #FFA129;
}
.text-center {
text-align: center
}
css设置input 提示文字距离边框距离
text-indent:{12px}
5、文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
css 设置元素水平垂直居中
①弹性布局
<!--弹性布局-->
<div class="parent">
<div class="child">我只是个孩子</div>
</div>
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
border: 1px solid #FF9900;
/*margin: 0 auto;*/
}
.child {
width: 100px;
height: 100px;
border: 1px solid skyblue;
text-align: center;
vertical-align: middle;
}
②定位+转化
<div class="parent">
<div class="child">Demo</div>
</div>
.parent {
position: relative;
width: 400px;
height: 400px;
background: skyblue;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: pink;
}
③ 单元格
<div class="parent">
<div class="child">单元格方式</div>
</div>
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 400px;
height: 400px;
background: skyblue;
}
.child {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
}
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;//滚动区域
}
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;
}
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>
②
设置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值
}
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; */
}
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的值无论是负多少都不会产生重叠-->
}\
css清除浮动
父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集
需要左右排列的block采用浮动布局,且父级一定要清浮动
①:.浮动的标签:after { content: ''; display: block; clear: both; }
②;.浮动标签下一个要显示的标签(会受到他浮动影响的):before { content: ''; display: block; clear: both; }
瀑布流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>