HTML"创作"心得

最新推荐文章于 2024-03-23 20:03:07 发布

石页yks

最新推荐文章于 2024-03-23 20:03:07 发布

阅读量1.9k

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_39034533/article/details/96136881

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML"抄袭"网页制作(静态网页)[手动滑稽]

参考网站：http://www.178vr.com/sy

截图：

很好看，，，，very nice

我做的

截图：

(JS正在学所以只能做静态网页)

HTML看起来很简单但对我这种新手党也算不上友好

这也算的上是第一次实战了

心得：

1、在做网页是要对网页布局想好，实在不行就画下来。在做的时候就会清楚很多

2、遇到不会的那一定是要去查了，把不会的搞定，会有一些成就感

3、在使用table布局的时候有些位置你咋搞也整不过去就看看加td能不能解决

在最后附上我的拙作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视幻灵镜</title>
  <style>
    #div_head{
      text-align: center;
      margin-top: 0px;
      border: 0px solid;
      background-image: url(th.jpg);
      background-repeat: no-repeat;/*不重复*/
      background-size: cover;/*覆盖放大*/
      width: 100%;
      height: 500px;
    }



    #div_center{
      text-align: center;
      background-image: url(星空.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 1600px;
    }

    #div_rear{
      background-image: url("rear.jpeg");
      height: 500px;
      width: 100%;
    }
    #div_rear table{
      width: 50%;
    }

    /*img{*/
      /*margin: 0 auto;*/
    /*}*/

  </style>
</head>
<body>
<div id="div_head">
  <div>
    <a href="http://www.178vr.com/sy" target="_blank" style="text-decoration: none"><b>首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a>
    <a href="http://www.178vr.com/gywm" target="_blank" style="text-decoration: none"><b>关于我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a>
    <a href="http://www.178vr.com/cpzx" target="_blank" style="text-decoration: none"><b>产品中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a>
    <a href="http://www.178vr.com/lxwm" target="_blank" style="text-decoration: none"><b>联系我们</b><br></a>
    <img src="标志.png" style="width: 345px;height: 210px">
    <br>
    <h1 style="font-size: 60px;display: inline ">博</h1><h1 style="color: red;font-size: 60px;display: inline">尧</h1><h1 style="font-size: 60px;display: inline">信息科技</h1>
    <h3 style="font-size: 30px;display: inline"><br><br>超越 * </h3>
    <h3 style="font-size: 30px;display: inline">创新</h3>
  </div>
</div>
<div id="div_center">
  <img id="bg2" src="星空.jpg"/>
  <h1 style="font-size: 40px;color: aliceblue">服务内容</h1>
  <table align="center">
  <tr align="center">
    <td align="left" style="width: 50%">
    <h3 style="color: #cccccc">数字应用开发(AR、VR、MR)</h3>
    <p style="color: #cccccc">致力于虚拟现实VR、增强现实AR等数字化应用研发;<br/>
      以丰富得经验为客户提供自策划至成品落地得<br/>
      一条龙服务。</p><br/>
    <h3 style="color: #cccccc">数字化展示解决方案</h3>
    <p style="color: #cccccc">秉承开放化的设计，融合虚拟现实、全息投影<br/>
      等数字化技术，为您提供最优质得展产品展示解<br/>
      决方案。</p><br/>
    <h3 style="color: #cccccc">全景营销</h3>
    <p style="color: #cccccc">微信的普及也给新的营销模式带来机会。全景<br/>
      营销利用其新颖、易传播等特征可快速吸引<br/>
      潜在客户。</p>
    </td>
    <td align="right"style="width: 50%">
      <h2 align="center" style="color: #cccccc" >简介：</h2>
    <video  width="800" height="650" controls="controls" autoplay="autoplay">
      <source src="f114v-dk9nx.webm" type="video/webm"/>
    </video>
    </td>
  </tr>
  </table>
  <table>
    <tr>
      <br/><h1 align="center" style="font-size: 40px;color: #cccccc">产品中心</h1><br/>
      <a herf="www.baidu.com" target="_blank" title="百度"><img style="height: 286px;width: 512px" src="狙1(4).jpg"></a>
      <a herf="www.bing.com" target="_blank" title="必应"><img style="height: 286px;width: 512px" src="狙1%20(2).jpg"></a>
      <a herf="www.360so.com" target="_blank" title="360"><img style="height: 286px;width: 512px" src="狙1%20(1).jfif"></a><br/>
      <a herf="www.bilibili.com" target="_blank" title="必应"><img style="height: 286px;width: 512px" src="狙1%20(3).jpg"></a>
    </tr>
  </table>
</div>
<table id="div_rear" >
  <tr width="202px" >
    <td height="200px" ></td>
    <td  height="200px"></td>
  </tr>
  <tr height="200px">
    <td>
      <p align="center" style="color: #cccccc;font-size: 40px;">联系我们</p><br/>

    </td>

  </tr>
  <tr>
    <td width="25%"></td>
    <td align="left" width="25%" height="300px" >
      <br/><br/><br/>
      <img src="电话.png"><p style="color: #cccccc; font-size: 30px; display: inline">&nbsp;&nbsp;&nbsp;12345678910</p><br/>
      <img src="邮箱%20(1).png"><p style="color: #cccccc; font-size: 30px; display: inline">&nbsp;&nbsp;&nbsp;123456789@qq.com</p><br/>
      <img src="地址.png"><p style="color: #cccccc; font-size: 30px; display: inline">&nbsp;&nbsp;&nbsp;山东省</p>
    </td>
    <td align="center" width="25%" >
      <from>
        <input align="center"  style="width: 600px;height: 45px;border-radius: 7px" name="留言标题" placeholder="    请输入留言的标题" type="text"><br/><br/>
        <input align="center"  style="width: 600px;height: 45px;border-radius: 7px" name="留言内容" placeholder="    请输入留言内容" type="text"><br/><br/>

        <input align="center"  style="width: 600px;height: 45px;border-radius: 7px" name="联系邮箱" placeholder="    请输入联系邮箱" type="text"><br/><br/>
        <input align="center"  style="width: 70px;height: 45px;border-radius: 7px" name="提交" type="submit">

      </from>
    </td>
    <td width="25%"></td>
  </tr>
  <tr>
    <td>
    </td>
    <td height="200px">
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td align="right">
      <p  style="color: #cccccc;display: inline" align="right">版权所有：博尧科技有限责任公司&nbsp;&nbsp;&nbsp;鲁ICP备1802123456号</p>
    </td>
  </tr>
</table>
</body>
</html>

石页yks

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML"创作"心得

HTML"抄袭"网页制作(静态网页)[手动滑稽]参考网站：http://www.178vr.com/sy截图：很好看，，，，very nice我做的截图：(JS正在学所以只能做静态网页)HTML看起来很简单但对我这种新手党也算不上友好这也算的上是第一次实战了心得： 1、在做网页是要对网页布局想好，实在不行就画下来。在...
复制链接

扫一扫