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

这是我学代码的笔记,如果有什么不对的请指出谢谢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;


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,205评论 0 11
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 一、下面我将简单的介绍移动端布 局的八种方式: 1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布...
    李好Ario阅读 1,579评论 0 8
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,899评论 0 1
  • 老东家终于来武汉了,暑期在那边二个月算是产品入门吧,可以说,现在在面试的时候能扯得东西都是在58学到的,非常感谢。...
    白学阅读 267评论 0 1