利用 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>

运行至浏览器:

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


目录
相关文章
|
6月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
517 3
|
6月前
|
JavaScript
通过js实现单击或双击直接修改内容
通过js实现单击或双击直接修改内容
62 0
|
1月前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
330 0
|
2月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
255 5
|
4月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
|
6月前
|
小程序
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面
402 1
|
5月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
6月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
113 1
WebStorm2023新版设置多个窗口,支持同时显示多个项目工程
WebStorm2023新版设置多个窗口,支持同时显示多个项目工程
164 0
vue项目中点击按钮切换图片
vue项目中点击按钮切换图片