美文网首页
零基础学代码笔记【第一周】

零基础学代码笔记【第一周】

作者: 020101 | 来源:发表于2016-05-29 18:26 被阅读0次

这是我学代码的笔记,如果有什么不对的请指出谢谢ww


                                                                                                                            师傅:西南白


网页基本骨架

<html>

<head>

</head>

<body>

</body>

</html>


引入css

<link rel="stylesheet" type="text/css" href="X.css">(放在head里)【也可放在body里】


使用汉字

<meta charset="utf-8">(放在head里)【还有gbk、gb2312等】


图片

加入图片:<img class="X" src="图片地址" alt="(描述图片)">

background: url("图片地址");

页面宽充满一张:background-size:cover;【以中心为主铺满 div 但是不一定把图片内容全显示出来】

原尺寸:max-width:100%;

固定取图片中间一部分:background-position:50% 50%;(数字为参照)


浮动和清除浮动

例:

float:left

clear:left/clear:both


clearfix清除浮动

.clearfix:before, .clearfix:after {

content:" ";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

zoom:1;

}


任意摆放元素

position:absolute;(以整个页面为参照)

position:relative;(以其它元素为参照,加在被参照元素里)

一般配合top、left等


如果加padding导致超过宽被挤到下一行

* {

box-sizing:border-box;

}


块变圆

border-radius:50%;(数字为参考)


加阴影

box-shadow:0 5px 5px rgba(0,0,0,0.1);(数字为参考)


取消下划线

text-decoration:none;


不随网页下滑/固定

position:fixed;


居中

margin:0 auto;

position:fixed;(一般配合top、left、margin-left等)


字体

常见宋体,数字为大小参照:

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;(参考其他网站)

居中:

text-align:center;

常见字粗:

font-weight:normal;


相关文章

网友评论

      本文标题:零基础学代码笔记【第一周】

      本文链接:https://www.haomeiwen.com/subject/hrsqdttx.html