CSS3实战网页设计(3)

最新推荐文章于 2022-06-09 10:58:41 发布
最新推荐文章于 2022-06-09 10:58:41 发布
阅读量162 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014635374/article/details/118816885
版权

         

html源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天马行空,自由飞翔设计室</title>
    <link href="style/css4-5.css" rel="stylesheet" type="text/css" />
    <link href="style/div4-5.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="box">
    <div id="menu01"><img src="images/logo.gif" width="101" height="22" />
        <div id="cd"><img src="images/home.gif" alt="" width="37" height="18" /><img src="images/map.gif" alt="" width="48" height="18" /><img src="images/english.gif" alt="" width="46" height="18" /></div>
    </div>
    <div id="menu02"><img src="images/menu01.gif" width="102" height="28" /><img src="images/menu02.gif" alt="" width="102" height="28" /><img src="images/menu03.gif" alt="" width="102" height="28" /><img src="images/menu04.gif" alt="" width="99" height="28" /><img src="images/menu05.gif" alt="" width="101" height="28" /></div>
    <img src="images/img.gif" width="770" height="200" />
    <div id="main">
        <div id="left">
            <div id="login"><img src="images/bt.gif" width="169" height="28" /><br />
                <form id="form1" name="form1" method="post" action="">
                    <p>
                        <label for="name">USER</label>
                        <input type="text" name="name" id="name" />
                    </p>
                    <p>
                        <label for="pass">PASS</label>
                        <input type="text" name="pass" id="pass" />
                        <br />
                        <input type="image" name="button" id="button" src="images/button.gif" />
                        <span class="block">注册|忘记密码          </span></p>
                </form>
            </div>
            <div id="left01"><img src="images/fsh.gif" width="167" height="225" /><img src="images/btn.gif" width="161" height="27" /><img src="images/img01.gif" width="150" height="65" /></div>
        </div>
        <div id="right">
            <div id="right01">
                <div id="cp01">
                    <p><img src="images/img02.gif" width="158" height="86" /></p>
                    <p class="block01">消费类笔记本</p>
                    <p>显示屏幕：159*69点阵</p>
                    <p>键盘：59键</p>
                    <p>电源：内置可充电锂离子电池</p>
                    <p>外型尺寸：103*69*16.5mm <br />
                    </p>
                </div>
                <div id="cp02">
                    <p><img src="images/img03.gif" width="158" height="86" /></p>
                    <p class="block01">商务笔记本</p>
                    <p>显示屏幕：169*69点阵</p>
                    <p>键盘：59键</p>
                    <p>电源：内置可充电锂离子电池</p>
                    <p>外型尺寸：100*69*16.5mm </p>
                </div>
                <div id="cp03">
                    <p><img src="images/img04.gif" width="158" height="87" /></p>
                    <p class="block01">家用型笔记本</p>
                    <p>显示屏幕：179*69点阵</p>
                    <p>键盘：59键</p>
                    <p>电源：内置可充电锂离子电池</p>
                    <p>外型尺寸：120*69*16.5mm </p>
                </div>
            </div>
            <div id="right02">
                <div id="down">
                    <p><img src="images/down.gif" width="335" height="28" /></p>
                    <dl>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                    </dl>
                </div>
                <div id="news">
                    <p><img src="images/news.gif" width="335" height="28" /></p>
                    <dl>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                        <dt>简约时尚的外观，金属外壳简约时尚</dt>
                        <dd>【2006-11-11】</dd>
                    </dl>
                </div>
            </div>
            <div id="right03">
                <img src="images/service.gif" width="205" height="50" />
                <ul>
                    <li>售后服务Service</li>
                    <li>售后政策Policy</li>
                    <li>售后网点Net Point</li>
                    <li>下载网点Download</li>
                </ul>
                <img src="images/FAQ.gif" width="205" height="76" />
            </div>
        </div>
    </div>
    <div id="bottom"><img src="images/b_lo.gif" width="101" height="24" />托普朗宁(北京)教育科技有限公司 All rights reserved 客户服务热线：010-12345678<br />
        今日访问次数666次，总访问次数1244556<br />
    </div>
</div>
</body>
</html>

css4-5.css 样式文件如下：

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
    padding: 0px;
}

body {
    font-family: "宋体";
    font-size: 12px;
    color: #c3c3c3;
    background-image: url("../images/bg.gif");
    background-repeat: repeat-x;
}

/*display: block;此元素将显示为块级元素，此元素前后会带有换行符。*/
.block {
    display: block;
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin-top: 10px;
    margin-left: 15px;
    float: left;
}

.block01 {
    display:block;
    width:80px;
    height:20px;
    line-height:20px;
    padding-left:25px;
    background-image:url(../images/tb.gif);
    background-repeat:no-repeat;
    background-position:left 3px;
    font-weight:bold;
    color:#333;
}

div4-5.css样式文件如下：

@charset "utf-8";
/*margin:auto;居中展示*/
#box{
    width:770px;
    height:866px;
    margin:auto;
}
#menu01 {
    width:770px;
    height:40px;
}
#menu01 img {
    float:left;
}
#cd {
    width:200px;
    height:30px;
    float:right;
}
#cd img{
    margin:5px 10px 0px 10px;
}
#menu02 {
    width:770px;
    height:28px;
    text-align:right;
}
#main{
    width:770px;
    height:520px;
    margin-top:26px;
    border-top:#dcdcdc 1px solid;
    border-bottom:#dcdcdc 1px solid;
}
#left{
    width:180px;
    height:485px;
    float:left;
    margin-top:10px;
    text-align:center;
    border-right:#cccccc 1px solid;
}
#login {
    width:180px;
    height:125px;
}
#name,#pass {
    width:123px;
    height:20px;
    border:#abadb3 1px solid;
    margin-top:10px;
}
#button {
    float:right;
    margin:11px 15px 0px 0px;
}
#left01 img{
    margin:5px 0px 5px 0px;
}
#right{
    width:565px;
    height:485px;
    float:right;
}
#right01 {
    width:565px;
    height:230px;
    float:left;
}
#cp01,#cp02,#cp03 {
    width:160px;
    height:230px;
    line-height:25px;
    float:left;
    margin:0px 14px 0px 14px;
}
#right02 {
    width:350px;
    height:245px;
    float:left;
    border-right:#cccccc 1px solid;
}
#down {
    width:340px;
    height:110px;
    margin-bottom:20px;
}
#news {
    width:340px;
    height:110px;
}
#down img,#news img {
    margin-bottom:4px;
}
#down dt,#news dt {
    width:225px;
    line-height:25px;
    border-bottom:#848484 dashed 1px;
    float:left;
    background-image:url(../images/tb01.gif);
    background-repeat:no-repeat;
    background-position:5px 10px;
    padding-left:15px;
}
#down dd,#news dd {
    width:100px;
    line-height:25px;
    border-bottom:#848484 dashed 1px;
    float:left;
    text-align:right;
}
#right03 {
    width:205px;
    height:245px;
    float:left;
}
#right03 li {
    width:150px;
    line-height:26px;
    border-bottom:#848484 dashed 1px;
    background-image:url(../images/tb01.gif);
    background-repeat:no-repeat;
    background-position:5px 10px;
    padding-left:15px;
    margin-left:20px;
    list-style-type:none;
}
#bottom {
    width:770px;
    height:42px;
    padding-top:8px;
    line-height:20px;
}
#bottom img {
    float:left;
    margin:5px 50px 0px 20px;
}

效果如下：

 

蜗牛杨哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
CSS3特效页面设计
少年白马
08-19 530
CSS3特效页面设计页面结构参考资料2d转换效果CSS3过度效果导航栏派生选择符伪类使用代码实现 页面结构 参考资料 2d转换效果 <!DOCTYPE html> <html> <head> <style> div { margin:30px; width:300px; height:200px; } div img{ width:100%; height:100%; } div
CSS网页设计实战CSS网页设计实战
12-12
CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战CSS网页设计实战
CSS3实战网页设计(2)
天涯芳草
07-16 432
html源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天马行空设计室</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href=...
css3网页
saygoodto的博客
11-27 239
这一周任务是css3网页设置，总体感觉不难，就是有很多细节需要注意， 网页布局就不多说，在css3transform中需要用到hover这一伪类，刚开始时这点总是出错，因为这个标签必须加在transform所在元素的父元素上， 因此在网页设置是容易将几个动画设置成一起动的情况。 在一点就是布局中用百分比设置，用像素设置网页宽度和高度也可以，但不兼容其他不同设备，如电脑的屏幕比手机大，一个网页
DIV+CSS网页设计的实战训练
07-16
DIV+CSS网页设计的实战训练。DIV+CSS网页设计的实战训练。
精通HTML5CSS3JavaScript网页设计
07-22
《精通HTML5 CSS3 Javaｓｃｒｉｐｔ网页设计》内容提要：HTML5、cSS3和 Javaｓｃｒｉｐｔ技术是网页设计的精髓，本书以应用实例和综合实战案例的形式逐一详解了 HTML5网页设计的文档结构、文本、图像、用HTML5创建...
HTML5+CSS3网页设计模板(30例)zip
最新发布
03-15
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和...
响应式Web设计(HTML5和CSS3实战)
12-09
响应式Web设计是一种现代网页设计方法，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。随着移动互联网时代的到来，用户越来越倾向于使用手机、平板电脑等移动设备浏览网页，响应式设计便成为了网页设计师必备的技能之...
CSS3实战与案例
01-24
标签“css3 实战 案例 源码”表明内容包括了CSS3的实际操作、实例演示以及源代码分析，这些都是提升Web设计技能不可或缺的部分。 在CSS3的世界里，我们首先会接触到选择器的扩展，如类选择器、ID选择器、伪类和伪...
HTML5+CSS3网页设计-第八章 定位网页元素.pptx
12-21
【HTML5+CSS3网页设计】中的定位技术是网页布局中的关键部分，它允许开发者精确控制网页元素在页面上的位置。本章主要介绍了四种CSS中的定位方式：static、relative、absolute和fixed，以及如何利用z-index调整元素...
HTML5-CSS3网页设计
05-27
自己设计并完成一个静态网站，用于大作业的上交。其中老师的具体要求如下： 1、网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频。作品应体现Web的特点，网站结构完整，链接正确、导航有效。 2、网站主题自选。 3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。 4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。 5、要求使用外部CSS文件。 6、布局方面，使用DIV+CSS布局。 7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。
CSS3实战网页设计(4)
天涯芳草
07-16 151
html源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天马行空-时尚娱乐</title> <link href="style/div6-5.css" rel="stylesheet" type="text/css" /> <link href...
CSS3中的网页布局
the hands of god的博客
02-19 548
网页布局 columns是多列布局特性的基本属性，该属性可以同时定义列数和每列的宽度，基本语法如下：columns:||; column-width:定义每列的宽度； columns-count：定义列数。 columns-width属性可以定义单列显示的宽度，该属性可以与其他多列布局属性配合使用，也可以单独使用。基本语法如下：columns-width:|auto; column-
CSS3-美化网页元素
云祁QI
08-11 1072
CSS3美化网页元素
css网页设计作业_网页制作
weixin_39621427的博客
11-29 2178
1.设计题目：制作个人主页 (1)网站设计与实现具体要求 1、设计题目： 选择一个你最感兴趣的主题，进行网站设计与开发，网站内容具有实用价值。 2、开发环境： 综合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VB...
前端基础 CSS 第十一章 使用CSS样式表 特效属性部分 ----暑假学习第九天
树叶子的博客
07-14 546
第十一章 使用CSS样式表 11.8 定位属性         使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始文档布局分离且任意定位。 11.8.1 定位方式 position 使用定位方式属性可以控制浏览器如何定位HTML元素 语法：position:static  |  absolu...
CSS属性和盒模型知识总结（03）
yihjh的博客
10-25 182
字体样式 字体样式 字体样式 font-family 字体类型 可以显示操作系统上安装的字体 英文的字体 ，只影响英文 中文的字体，即影响中文，又影响英文 设置混合字体时，英文在前，中文在后 *建议不要去设置罕见的字体，读者可能没有这个形式的字体。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> &l..
30个酷毙的交互式网站(HTML5+CSS3)
各研发管理
10-11 5935
很久前就像找些文章来翻译，and这是第一篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看网站，还要排版，花了两天空闲时间还是硬着头皮翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~ ----------------------------------------------------------------------------------------...
基于HTML5+CSS3的网页设计与实现
kkkioe的博客
06-09 2990
摘要：随着互联网技术的不断发展，电子设备的广泛应用和高普及度，网页作为互联网信息的重要载体，其网页设计技术将面临新的挑战。HTML和CSS作为网页前端开发所运用的主要核心技术，如何灵活运用，使得web开发出来的网页设计满足绝大多数用户需求是技术人员和项目负责人的核心工作之一。文章以介绍XX主题网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。...
CSS3实战指南：打造精美网页设计
"《Stunning CSS3：实用指南》是一本专注于最新CSS3技术的项目导向书籍，作者Zoe Mickley Gillenwater旨在帮助读者掌握并应用CSS3在网页设计中的高效、美观和实用方法。不同于传统的CSS3百科全书，本书不追求详细...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值