佛山网站建设明细,现在去横琴会变黄码吗,百度怎么发免费广告,驻马店营销型网站建设css也精炼了解以下内容即可#xff1a;
一个网页所呈现出来的画面#xff0c;你可以理解他们就是由一个又一个的盒子拼凑组成而来。
一个盒子#xff0c;它有外边距#xff0c;还有内边距。
黑色的部分是盒子本身的样子#xff0c;外侧蓝色的部分是外边距#xff0c;内…css也精炼了解以下内容即可
一个网页所呈现出来的画面你可以理解他们就是由一个又一个的盒子拼凑组成而来。
一个盒子它有外边距还有内边距。
黑色的部分是盒子本身的样子外侧蓝色的部分是外边距内侧绿色的部分是内边距。 1、边框border 实际开发里代码这样写
(这种写法属于是很简写的了
!DOCTYPE html
html langen
headmeta charsetUTF-8titlece Title/title/head
bodydiv stylewidth:300px;height:300px;border:1px solid black/div/body
/html这里的px数值就是盒子黑色边框线的粗细px值越小线越细反之则越大。solid是实线dotted和dashed是虚线两者虚线的样式有略微不同。 2、外边距margin
div stylewidth:100px;height:100px;border:1px groove;margin-top: 10px/divdiv stylebackground-color:blue;width:100px;height:100px;margin:10px;/div 3、内边距padding
这里设置了一个100px所以盒子被撑大了。 div stylebackground-color:blue;width:100px;height:100px;margin:10px;
padding:100px;/div 4、阴影。box-shadow再详细的属性可以去菜鸟里去看。还有一些设置弧度的border-radius20px;之类的 div stylewidth:100px;height:100px;border:1px groove;
margin-top: 10px;box-shadow: 0 0 10px -2px rgba(0,0,0,.5)/div5、box-sizing属性下的border-box设置一个标准的盒状模型 这样想要设置的边框和内边距的值就是包含在width内的。
比如width设了100pxborder为1padding是10.那么盒子里的内容就是100-1-1089px;
如果你不理解这里是什么意思无脑设置box-sizing:border-box;这是最简单的一种布局方式在全局生效。
一般这样写
step1新建一个叫global.css的文本让所有的新表所有的元素都设成了一个盒子模型。 step2、引入global.csslink就是引入外部文件的意思。 如果你不想这些元素超出这个盒子写上这个属性overflow:hidden;就是把超出这个盒子的部分给隐藏起来。
div stylewidth:100px;height:100px;border:1px
groove;margin-top: 10px;
box-shadow: 0 0 10px -2px rgba(0,0,0,.5);
box-sizing: border-box;overflow:hidden;divsssssssssssssssssssssssssssssssvssssssssssssssssvvdsksfsis/divdivaaaasssssssssssssssssssssssssssssssvssssssssssssssssvvdsksfsis/div
/div
本来的样子 隐藏了之后 FLEX布局弹性布局
如果没有加flex布局的话就是垂直排列。
这里的margin如果连写的话是上右下左如果没写的话就为0。顺时针 显示如图 但是加了flex布局之后就是水平排列 显示如图 一共有6个属性
属性一flex-direction 方向
其中的flex-direction如果在div中直接写flex-direction:column,
div stylemagrin:20px 0;display:flex;flex-direction:column
...
/div
column就是纵向排列,显示如下 也可以横向排列代码
div stylemagrin:20px 0;display:flex;flex-direction:row ... /div
显示效果如下 flex属性二flex-wrap如果在一个div内放了多个盒子那么这些盒子的显示效果就会被挤压
加上flex-wrap:wrap;这个属性之后就不会挤压然后会自动分行了。 代码如下 属性三justify-content默认默认是flex-start这个属性即是从最左边到最右边去排列。 再看一个属性flex-end从右往左排列 用的最多的还是center居中排列
space-beteween两端对齐
space-around等分间距 利用以上的知识去模拟一下豆瓣网首页 将其分为三个盒子
1、豆瓣网 2、输入框 3、读书、电影、同城...等等 属性四align- items 因为文本框和输入框之间的显示高度是不同的所以如果不加align-items属性的话它就显示会是这个样子逼死强迫症患者。 align-item一共有五个属性
代码在代码最外侧添加align-item属性。 div styleflex:1;display:flex;align-items:centerdiv stylewidth:100px;font-size:30px;color:#2f973e;豆瓣网/divdiv styleflex:1input typetext/div/div 现在做了顶部的样子 实现代码如下
h2flex布局/h2
div styledisplay: flex;width:70%;margin:30px auto;align-items:center
!--30px表示上、右、下、左四个方向的外边距都是 30px。auto表示左右外边距会自动调整使元素水平居中
此时width的宽度就是开始从中间来算
--div styleflex:1;display:flex;align-items:centerdiv stylewidth:100px;font-size:30px;color:#2f973e;豆瓣网/divdiv styleflex:1;padding-left:15pxinput placeholder请输入电影、音乐 typetext styleborder:1px solid #ccc;
padding:10px;outline: none;width:200px/div
!--outline:none;是把输入框外面的黑边给去掉--
!-- 此时把搜索分成了两块左右两个盒子。所以两个盒子最外侧各加一个flex:1。您看UI原图这时豆瓣网这个div设置了固定的宽度的话而输入框写了flex:1此时它的宽度就会填满除去豆瓣网div宽度的所有空隙--/divdiv styleflex:1;display: flex;justify-content:flex-end;font-size:20pxdiv stylepadding:0 10px;color:brown读书/div!--0表示上下内边距为 0。10px表示左右内边距为 10px。--div stylepadding:0 10px;color:dodgerblue电影/divdiv stylepadding:0 10px;color:darkgoldenrod 音乐/div/div/div属性五position绝对定位 有些元素比如span标签是不能随意移动的但是用position定位可以移动。
代码如下 效果如下 tips:
配图千图网
