设置公司简介页面
1.设置整个“公司简介”模块宽度为920px,字号为14px;
2.设置“公司简介”标题字号为16px,行高为50px,底部边框为1px实线,颜色为#DDD;
3.所有段落设置首行缩进2字符,行高为2em,两端对齐;
4.两处强调文本效果如图所示;
5.设置图片宽度为220px,高度为130px,边框为3px双实线,边框颜色为#0072C6;
6.设置图文混排效果,两张图都向右边浮动;7.设置图片与左边文本距离为40px(margin-left:40px;);
边框样式:
border-style属性:
border-style属性是边框必须设置的一个属性,常用样式有dashed(虚线)、dotted(点线)、solid(实线);border-style属性取值可以从一至四,上下左右边框可分别设置不同边框线。例:border-style:dotted solid double;
展示效果为左右边框为实线,上为虚线,下为双细实线,具体区别可实践论证。
border-width属性
注:border-width属性常用像素值来定义边框的宽度
border-color属性
默认的边框颜色是元素本身的前景色,如果没有为边框声明颜色,它将与元素的文本颜色相同,如果元素没有任何文本,边框颜色就是其父元素的文本颜色。
border-color:red; border-color:#00ff00; border-color:rgb(0,0,255);
注:border-color单独使用不起作用,须先使用border-style来设置边框样式
单边框属性:
border-top-style
上边框的样式
border-top-style
上边框的宽度
border-top-style
上边框的颜色
border属性:
border属性即border-style
、border-width
、border-color
属性的简写。例:border:2px solid #000;
源代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>羊了个羊</title> <style type="text/css"> *{ margin: 0; padding:0; } article{ width:920px; font-size:14px; } .main h2{ line-height:50px; font-size:16px; border-bottom: 1px solid #ddd; } .main img{ width:220px; height: 130px; float: right; border:3px double #0072c6; margin-left:40px; } .main p{ text-indent: 2em; line-height: 2em; text-align:justify; } .main strong{text-decoration: underline;} .main em{ font-style: normal; color:red; font-weight:bold; } </style> </head> <body> <article class="main"> <h2>羊了个羊</h2> <img src="img/羊了个羊.webp"> <p><em>《羊了个羊》</em>是一款网络上的卡通背景消除闯关游戏,游戏利用各种道具和提示来消除每一个关卡当中的障碍和陷阱。 随着热度不断攀升,有玩家也指出《羊了个羊》游戏玩法不算创新、涉嫌抄袭等问题, 虽然目前微信小游戏商业配套设施已经完善,但是质疑的声音也在向从业者提示着风险。 2022年9月13日,《羊了个羊》在微博爆火,游戏官方还未正式推出安装包, 想玩的朋友可以在微信小程序或者抖音小程序QQ小程序搜索。</p> <img src="img/羊.jpg"> <p>2022年9月,《羊了个羊》被曝抄袭“3tiles”:玩法一模一样,仅更换图标。 2022年9月,据羊了个羊官方微博,由于该游戏过于火爆,《羊了个羊》出现了宕机的情况,服务器2天崩了3次。 由于游戏火爆程度超预期,2022年9月13日《羊了个羊》官方已经开始急召后端服务器开发。官方称“推荐入职的奖励五千,自荐入职的奖金五千”。 2022年9月,北京简游科技有限公司已对“羊了个羊”进行软件著作权登记,该软件首次发表日期为2022年6月13日,登记批准日期为2022年7月29日。 2022年9月,据官方介绍《羊了个羊》的App版本已经提交App Store平台审核。 微博数据还显示,截至2022年9月19日,与“羊了个羊”相关的话题阅读量超过60亿人次,总互动超过540万次。</p> </body> </html>
运行至浏览器:
注:仅以百科内容作为实例文字展示,不包含源作者观点。