HTML简单网页制作（传智）

最新推荐文章于 2023-03-16 17:38:53 发布

开心肖肖乐-

最新推荐文章于 2023-03-16 17:38:53 发布

阅读量1.5k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45750195/article/details/104583377

版权

HTML 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

HTML部分
这里是HTML的头部信息，包括有元信息、网页标题等等。
CSS样式采用外链的方法来实现，所以用的是link标记

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="index.css" type="text/css">
 </head>

下面是主体部分，定义了两个DIV 元素header和content，分别用来存放标题和下面正文部分的内容。content分别包含了left和right两个DIV标记，将left设置背景图片，然后利用把无序列表嵌入到表格的方式来实现文本和图标以及右边打的字的显示效果。

<body>
 <div class=header>
   <h2 align="center">传智播客设计学院简介</h2>
   <h4 align="center"><pre>更新时间：2015年7月28日14时08分  来源：传智播客</pre></h4>
  </div>
   <div class="left">
    <div class="list">
     <table>
     <ul>
     <tr><td colspan="2"><li>移动时代的主流设计师</li></td></tr>
      <tr><td colspan="2"><li>集中于IT企业</li></td></tr>
      <tr><td colspan="2"><li>门槛高 薪水很高</li></td></tr>
      <tr><td colspan="2"><li>竞争少 要求全方位人才</li></td></tr>
      <tr><td colspan="2"><li>所需技能</li></td></tr>
      <tr>
       <td><img src="图标.png"></td>
       <td width=550px;>
        <pre><font class=text>            第四站<font id=fonts>移动UI</font>设计师</font></pre>
       </td>
      </tr>
      <tr><td colspan="2"><li>平均月薪：6570</li></td></tr>
     </ul>
     </table>
    </div>
   </div>

right通过设置他的左外边距和上外边距来实现使它和left在同一水平，right里面嵌套了三个DIV标记，分别用来存放三段文字，分别设置他们的间距实现最终效果。（此处代码中的中文省略）

<div class="right">
   <div class="text1">
     <strong>传智播客设计学院</strong>专注于平面设……
   </div>
   <div class="text2">
     <strong>传智播客设计学院</strong>教给你的远……
   </div>
   <div class="text3">
          迄今为止<strong>传智播客设计学院</strong>已经培养……
    </div>
   </div>
  </body>
 </html>

CSS样式

.header{
    width: auto;
    height: 80px;
   }
   .left{
    width: 75%;
    height: 400px;
    background: url(bg1.jpg) no-repeat;
    background-size: contain;
    border: white 1px solid;
   }
   .right{
    margin-top: -400px;
    margin-left: 75%;
    width: 25%;
    height: 400px;
   }
   .list{
    margin-left: 5%;
    margin-top: 9%;
    font-size: 18px;
    color: red;
   }
   .text{
    font-family: 方正康体简体;
    font-size: 35px;
   }
   #fonts{font-size: 60px;}
   .text1,.text3{
    width:85%;
    height: 130px;
    margin-left: 8%;
    margin-top: 8%;
    
   }
   .text2{
    width:85%;
    height: 80px;
    margin-left: 8%;
    
   }

最终效果图

开心肖肖乐-

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML简单网页制作（传智）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body&...
复制链接

扫一扫