利用 HBuilderX 设置公司简介页面

简介: 利用 HBuilderX 设置公司简介页面

设置公司简介页面

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-styleborder-widthborder-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>

运行至浏览器:

注:仅以百科内容作为实例文字展示,不包含源作者观点。


目录
相关文章
|
机器学习/深度学习 人工智能 自然语言处理
【自然语言处理】python之人工智能应用篇——文本生成技术
文本生成是指使用自然语言处理技术,基于给定的上下文或主题自动生成人类可读的文本。这种技术可以应用于各种领域,如自动写作、聊天机器人、新闻生成、广告文案创作等。
725 8
|
12月前
|
机器学习/深度学习 存储 大数据
在大数据时代,高维数据处理成为难题,主成分分析(PCA)作为一种有效的数据降维技术,通过线性变换将数据投影到新的坐标系
在大数据时代,高维数据处理成为难题,主成分分析(PCA)作为一种有效的数据降维技术,通过线性变换将数据投影到新的坐标系,保留最大方差信息,实现数据压缩、去噪及可视化。本文详解PCA原理、步骤及其Python实现,探讨其在图像压缩、特征提取等领域的应用,并指出使用时的注意事项,旨在帮助读者掌握这一强大工具。
694 4
利用 HBuilderX 设置新闻中心版式
利用 HBuilderX 设置新闻中心版式
294 2
利用 HBuilderX 设置新闻中心版式
|
存储 编译器 C语言
C语言:数组名作为类型、作为地址、对数组名取地址的区别
在C语言中,数组名可以作为类型、地址和取地址使用。数组名本身代表数组的首地址,作为地址时可以直接使用;作为类型时,用于声明指针或函数参数;取地址时,使用取地址符 (&),得到的是整个数组的地址,类型为指向该类型的指针。
1067 4
|
SQL 存储 关系型数据库
MySQL——批量修改表字段长度
MySQL——批量修改表字段长度
370 0
MySQL——批量修改表字段长度
|
存储 分布式计算 资源调度
如何利用 HBuilderX 制作图文混排的网页
如何利用 HBuilderX 制作图文混排的网页
582 3
|
存储 分布式计算 安全
大数据存储技术(2)—— HDFS分布式文件系统
大数据存储技术(2)—— HDFS分布式文件系统
2607 0
|
前端开发
基于jeecgboot的大屏设计器开发——数据集设计(一)
基于jeecgboot的大屏设计器开发——数据集设计(一)
263 3