一、CSS要点补充说明

1.margin:0 auto：自适应页面两边宽度

2.inlineinine-block都是文本类元素

3.position:absolutefloat:left/right会在内部将元素转化为display:inline-block

4. 一旦一个文本类元素包含文字，外面的文字会和里面的文字底对齐

vertical-align：调节对齐线

5. 左右两栏分别相对于两个容器向左右浮动：

<body><div><ul style="float:left"></ul><ul style="float:right"></ul></div>
</body>

二、项目演练

贴吧

<body><div>贴吧</div>
</body>

/*第一种写法*/
*{margin:0;padding:0;
}div{padding:0 10px;width:200px;line-height:20px;height:20px;font-size:12px;background:linear-gradient(0deg,blue,#000)color:rgba(255,255,255,0.8);text-align:center;
}/*贴吧前的伪元素贴吧logo*/
div::before{content:"";display:inline-block;width:12px;height:11px;background-image:url(![baidulogo](https://img-blog.csdnimg.cn/0558ed801e014ab1be6367be41aa7c10.gif)
);background-size:100% 100%;margin-right:5px;vertical-align:-1px;
}/*贴吧后的伪元素箭头*/
div::after{content:"";display:inline-block;background-size:100% 100%;width:6.5px;height:11.5px;float:right;margin-top:3px;background-image:url(https://cn.bing.com/images/search?view=detailV2&ccid=frJweGhu&id=7B1775EFB3F62442476F806652F5F8323F442415&thid=OIP.frJweGhuVb4vumWfie5MhgAAAA&mediaurl=https%3a%2f%2fimg.51miz.com%2fElement%2f00%2f84%2f24%2f44%2f29fdb4d8_E842444_436b8078.png&exph=400&expw=400&q=%e5%90%91%e5%8f%b3%e7%9a%84%e7%ae%ad%e5%a4%b4%e5%9b%be%e7%89%87%e7%99%bd%e8%89%b2&simid=608052418735250655&FORM=IRPRST&ck=4CC7834BF78AA58E9860419E05C2F51F&selectedIndex=56&ajaxhist=0&ajaxserp=0);
}

/*第二种写法*/
*{margin:0;padding:0;
}div{padding:10px 10px;width:200px;line-height:12px;height:12px;font-size:12px;background:linear-gradient(0deg,blue,#000)color:rgba(255,255,255,0.8);
}/*贴吧前的伪元素贴吧logo*/
div::before{content:"";display:inline-block;width:12px;height:11px;background-image:url(![baidulogo](https://img-blog.csdnimg.cn/0558ed801e014ab1be6367be41aa7c10.gif)
);background-size:100% 100%;margin-right:5px;
}/*贴吧后的伪元素箭头*/
div::after{content:"";display:inline-block;background-size:100% 100%;width:6.5px;height:11.5px;float:right;background-image:url(https://cn.bing.com/images/search?view=detailV2&ccid=frJweGhu&id=7B1775EFB3F62442476F806652F5F8323F442415&thid=OIP.frJweGhuVb4vumWfie5MhgAAAA&mediaurl=https%3a%2f%2fimg.51miz.com%2fElement%2f00%2f84%2f24%2f44%2f29fdb4d8_E842444_436b8078.png&exph=400&expw=400&q=%e5%90%91%e5%8f%b3%e7%9a%84%e7%ae%ad%e5%a4%b4%e5%9b%be%e7%89%87%e7%99%bd%e8%89%b2&simid=608052418735250655&FORM=IRPRST&ck=4CC7834BF78AA58E9860419E05C2F51F&selectedIndex=56&ajaxhist=0&ajaxserp=0);

笔试

使用语义化的html标签及css完成以下布局：
{最多两行20px #333，顶部对齐图片，底部间距8px}
{12px #666 行高1.2}使用语义化的html标签及css完成以下布局，考虑模块化和延展性。
容器默认宽度320px，右侧。

容器默认宽度320px，图片100*100
hover时容器宽度变成400px

<body><div class="wrapper"><img src="图片地址" class="img"><p class="content1">{最多两行20px #333，顶部对齐图片，底部间距8px}</p><p class="content2">{12px #666 行高1.2}使用语义化的html标签及css完成以下布局，考虑模块化和延展性。容器默认宽度320px，右侧。</p></div>
</body>

*{margin:0;padding:0
}.wrapper{width:320px;
}.wrapper:hover{width:400px;
}.wrapper .img{width:100px;height:100px;float:left;
}.content1{font-size:20px;line-height:20px;height:40px;overflow:hidden;color:#333;margin-bottom:8px;
}.content2{font-size:12px;color:#666;line-height:1.2em;
}

HTML-CSS_Day_1：CSS要点补充说明、项目演练相关推荐

【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
C# WebApi+Task+WebSocket实战项目演练(四)
一.课程介绍本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...
IOS基础之打砖块项目演练
IOS基础之打砖块项目演练本项目涉及CADisplayLink核心动画,各个控件的使用,运行循环,逻辑判断等,if和for,frame坐标的改变,CGPoint结构体,成员变量的赋值,两种手势,拖拽 ...
[css] 如何清除在项目中无用的css代码呢？
[css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...
C#模板引擎NVelocity实战项目演练
一.背景需求很多人在做邮件模板.短信模板的时候,都是使用特殊标识的字符串进行占位,然后在后台代码中进行Replace字符串,如果遇到表格形式的内容,则需要在后台进行遍历数据集合,进行字符串的拼接,继 ...
html+css+dom补充
补充1:页面布局一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...
如何在html中加入项目列表,css如何添加列表项目符号
css如何添加列表项目符号一般默认情况下列表项目符号是有的.如果是定义了 ul{list-style:none;} ,那个项目符号就没有了,在这种情况下,可以用 list-style-type把那个 ...
《HyperLedger Fabric 实战》—— 十、项目演练 -- 反欺诈系统
<HyperLedger Fabric 实战>-- 十.项目演练 – 反欺诈系统注意点 1.用户唯一ID应该是姓名与身份证号组合后的MD5,这样可以防止加盟用户仅通过机器生成的大量身份证 ...
Axure RP原型设计|全实战项目演练从入门到精通-姜浩-专题视频课程
Axure RP原型设计|全实战项目演练从入门到精通-124人已学习课程介绍多项目实战,讲师手把手详细演示教学从基础到精通的深入化进阶学习做优秀的原型设计课程收益交 ...

HTML-CSS_Day_1：CSS要点补充说明、项目演练

一、CSS要点补充说明

二、项目演练

贴吧

笔试

HTML-CSS_Day_1：CSS要点补充说明、项目演练相关推荐

最新文章

热门文章