html前端学习八：实例小米BBS论坛

最新推荐文章于 2022-08-27 23:55:00 发布

myt2000

最新推荐文章于 2022-08-27 23:55:00 发布

阅读量642

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/myt2000/article/details/103660530

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

实例小米BBS论坛

网页设计文件格式

->img 放图片
->js
->css
->html

line-height 行高

.download{
	position: absolute;
	display: inline-block;
	width: 60px;
	line-height: 50px;
	left: 160px;
	color: #ff7e3e;
}

text-decoration去掉a元素下划线

a {
	text-decoration: none;
}

list-style去掉li的小黑圆点

li {
	list-style: none;
}

background-image: url(’’)样式中引用图片

background-image: url('../img/header_mobile.png');
background: url('../img/header_mobile.png') no-repeat 0 center;
#简写
background-position:0 center;

text-align居中内联元素

img这种要居中要用到text-align:center;

文字加粗样式 font-weight 设置文本字体的粗

值：
normal：默认字符
bold：定义默认粗体

数值：
100 100-300 细体
…… 400-500 默认
900 600-900 粗体
400等于normal，而700等同于bold
默认为400

font-family字体调整

font-family: “arial,“Microsoft Yahei”,“Hiragino Sans GB”,sans-serif”;

arial字体
Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。

display none 隐藏

display:none;

子元素的hover写法

.download:hover .phone-qrcode{
	display: block
}

子级的元素position调整父级一定要定义子集调整的方向

.logo{ 	
	position: absolute;
	display: inline-block;
	width: 150px;
	height: 50px;
	/* background: red; */
	background: url('../img/logo_cn.png');
	left: 0;
	top: 0;
}

绘制三角形

    <title>三角形-border</title>
    <style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	.box{
    		width: 0px;
    		height: 0px;
    		border: 30px solid red;
    		border-right-color: transparent;
    		border-bottom:none;
    		border-left-color: transparent;
    	}
    </style>
</head>

<body>
    <div class="box"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DFF21W5U-1577065946159)(http://img2.ph.126.net/k7eHkppz4jh0PhRJCC35aA==/2596325185198927739.png)]

文字在盒子的位置下方，如果不想调margin-top,可以使用line-height

调整行高
line-height: 58px;

浮动后的内联元素变为块

float:right;

选择器权重问题

多级选择器

ul .li-text

.li p

优先比较第一个选择，如果不相同，选择权重大的，如果相同才继续比较，如果都相同，按照顺序执行，覆盖

头像圆形改造

<a class="avatar" href="javascript:void(0)">
    <img src="img/avatar6.jpg" alt="" width="50" height="50" />
</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8xrs2zCs-1577065946159)(http://img1.ph.126.net/aQpc9NdRy–EKQTJUZIo_A==/1272829844705456728.png)]

修改完之后，头像是圆的

.avatar img{
	border-radius: 50%;	
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vn1YjOsa-1577065946160)(http://img1.ph.126.net/US6n-IgpN6Lg-biUADI19A==/1279022294193071218.png)]

对于内联元素，调整了基线，就可以设置外边距了

.article-title img{
	vertical-align: middle;
	margin: -4px 0 0 5px ;
}

class选择器的精准选择方法

<i class="icon-desc icon-view"></i>

.icon-desc.icon-comment{
	background-position: 0px -12px;
	margin: 0 0 0 0;
	vertical-align: middle;

内联块如何居中

text-align:center;

a标签手指状态改为鼠标状态

cursor:default;

小手指鼠标状态

cursor: pointer;

不换行

white-space:nowrap;

超出部分用省略号代替

text-overflow:ellipils;

自适应最小宽度

min-width:990px;

myt2000

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html前端学习八：实例小米BBS论坛

实例小米BBS论坛网页设计文件格式->img 放图片->js->css->htmlline-height 行高.download{ position: absolute; display: inline-block; width: 60px; line-height: 50px; left: 160px; color: #ff7e3e;}te...
复制链接

扫一扫