网页设计作业1.0

设计作业效果图展示：

明确任务要求

1、实现如上图所示的图文混排效果，每个字都要一致。

2、“咖啡图片”是超链接形式，点击跳转到 https://baike.so.com/doc/5352504-5587962.html

整理设计思路

1.设计一个页面的整体框架，让它固定为正常网页界面的宽高，再从整体框架里面进行布局。

2.页面的内容框架布局分为：①左边的图片内容框架

　　　　　　　　　　　　 ②右边的文字内容框架

（为了页面的整体美观，两个内容框架要有一定的间隔）

3.添加图片以及为图片套上超链接使其能够点击图片即可跳转到相应链接。

4.添加所需的文字，以及文字的大小颜色的补充。

实现步骤：

CSS部分—实现border整体框架

设计整体框架包装 [ wrapper ]。背景我采用白色，[ border ]的宽度与高度调整你们可以根据你们的网页大小进行调整，这里我设置为1500 x 700px。下边其他属性就是对边框的美化了。

border整体框架代码实现：

#wrapper{
　　background:#FFF;
　　width:1500px;
　　height:700px;
　　margin:0 autp;
　　border:solid 0px #E7E7E7;
　　border-top:5px solid #0088cc;
　　border-bottom:5px solid #0088cc;
　　border-radius:10px;
　　box-shadow:0 0 20px rgba(0,0,0,0.5);}

下面是border一部分基础属性表：（具体属性可点资料网进行查阅 http://caibaojian.com/css3/properties/border/index.htm ）

CSS部分—DIV+CSS的布局

整体框架美化完成之后，我们就可以在这个框架里面进行我们想要的布局（其实就是对框架进行分块啦）——

[ banner ] 部分是为了照片文案与框架顶部拉开距离而添加的布局，其作用就是为了美观。[ photo ] 部分即为存放照片的区域布局，然后就是文本内容 [ content ]的框架布局。那肯定就会有小伙伴疑惑了：“靓仔！两个框架之间的间隔我要怎么拉开呢！” 诶，~￣▽￣~*靓仔这就告诉你，我们需要用到的是 margin-left 属性，margin-left 就是左外边距，你可以理解成content框架的左边框与photo框架的右边框的距离，这里我设置为50px，具体效果就如效果图所示。此时又会有小伙伴又疑惑了：“靓仔不行啊，为什么我的文字跑图片的下边了！” 接下来我们就要利用 float浮动方法将#photo与#content两个部分并列横向显示了，即为 float:left 。

框架分块布局代码实现：

#banner{
        width:1500px;
        height:30px;}
        
#photo{
        width:730px;
        height:500px;
        border:1px #000 solid;
        margin:5px;
        float:left;}

#content{
    　　width:670px;
  　　  height:501px;
   　　 float:left;
   　　 margin-left:50px;}

CSS部分—文字的美化

这个其实不用说，在座的各位是肯定会的！我这里直接附上具体代码。

文字的美化代码实现：

.p1{color:#09F;text-indent:0.5em;}
    
.p2{text-indent:1.5em;text-align:justify;margin-left:1em;font-size:14px;letter-spacing:1.5px;word-wrap:break-word; }

.p3{color:#09F;font-size:14px;letter-spacing:1.5px;text-decoration:underline;font-style:italic;}
    
.p4{color:#06F;margin-left:1em;font-size:14px;letter-spacing:1.5px;}

.p5{color:#F00;font-size:26px;font-weight:bold;}
    
.p6{color:#960;margin-left:0.5em;font-size:24px;font-weight:bold;}

HTML部分—图片的放置与引入图像超链接

图像链接是在<a></a>标签对中添加图像标签，即<a href="网站的地址链接"> <img src="图片的名称.类型名"</a>，图像需要放进div块的 #photo标签中哦！一般会自动为你图片添加边框的，如果你嫌弃它可以直接来个img标签添加border属性值为0，

就可以消除啦！对啦对啦，还有如果不想让网页直接跳转成对应链接上，可以在网站链接双引号后边添加 target="_blank" 这样它就会再生成另外一个网页啦。切记！图片是编辑在id为photo的容器中

图片与引入图像超链接代码实现：

<div id="photo">

<a href="https://baike.so.com/doc/5352504-5587962.html" target="_blank"><img src="photo.png" width="732" height="501"/></a>

</div>

HTML部分—文字的排版与引入文字超链接

文字的排版有小伙伴会像我之前一样，如果只用HTML进行编辑，为每段所要改的不同字体大小与样式，放在一整块会显得十分的凌乱，且修改时很难寻找到对应的地方。这可能就是CSS给我的最好的感受吧，让很多东西变得更加简洁。切记！文案是编辑在id为content的容器中。排版的文字样式已经附着在文字美化的CSS中，在这里我就不多讲了。引入文字超链接，这其实与图像超链接大致相同，即<a href="网站的地址链接"> 在这里写你想要可点击跳转的文字</a> 。好啦，话不多说直接上代码参考。

文字排版与引入文字超链接代码实现：

<div id="content">

<h1>Web前端工程师</h1>

<p class="p1">技术要求：</p>

<p class="p2">了解常用的一些JS框架，如jQuery、YUI等；掌握最基本的JavaScript计算方法编写；对目前互联网流行的网页制作方法( Web2.0 )HTML+CSS，以及各大浏览器兼容性有较多的了解；基本掌握前沿技术( HTML5+CSS3 )。

<a href="https://baike.baidu.com/item/Web前端设计与开发" target="_blank"> <font class="p3">Web前端技术</font> </a>  你究竟掌握了多少...</p><br/>

<p class="p4">更新时间：2015年05月19日20点（已有 <font class="p5">323</font> 人点赞）</p><hr/>

<p class="p6">相关技术文章 <font class="p5">8</font> 篇</p>

</div>

结语：

这个作业的难度在于对DIV+CSS布局的理解，就是如何将一个页面分为哪些模块，各个模块之间的父子关系等，div的CSS定位在后边也是靓仔作者需要学习的地方，弹性盒模型布局模式也是可以完成对网页的分块。总结来说，这份作业是比较容易理解的，大致的思路与代码的实现参考也希望能够助你理解。这也是作者本身要完成的小作业，所以就拿出来嗦嗦啦！也是为了记录自己的大学生活。

以上代码均为本人原创，严禁抄袭，仅供参考。

好啦，这里是没发随笔就是在偷懒玩游戏的靓仔 LORYOKI，期待下一次的随笔吧！白白ヾ(•ω•`)o

posted @ 2020-10-03 21:28 LorYoKi 阅读(264) 评论(2) 编辑收藏举报

刷新页面返回顶部

LorYoKi