利用 HBuilderX 设置公司简介页面

听风者i

已于 2024-05-13 08:56:42 修改

阅读量2.6k

点赞数 2

分类专栏： HBuilderX 文章标签： html css css3 1024程序员节 web

于 2022-10-01 22:56:03 首次发布

本文链接：https://blog.csdn.net/weixin_67632468/article/details/127138118

版权

HBuilderX 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

设置公司简介页面

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>