【网页设计】前端代码练习（六）

最新推荐文章于 2024-09-15 21:53:26 发布
最新推荐文章于 2024-09-15 21:53:26 发布
阅读量173 收藏 3
点赞数 5
分类专栏： 网页设计 文章标签： 前端 开发语言 html5 css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64077978/article/details/140494379
版权

室外居家布局设计 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;}

div{width:1400px;height:300px;margin:20px auto;}

ul{list-style:none;float:left;width:200px;margin:10px;border:1px solid #CCC;text-align:center;height:250px;padding-top:20px;}

li{margin-bottom:10px;}

</style>

</head>



<body>

<div>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

</div>

</body>

</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;}

div{width:1400px;height:300px;margin:20px auto;}

ul{list-style:none;float:left;width:200px;margin:10px;border:1px solid #CCC;text-align:center;height:250px;padding-top:20px;}

li{margin-bottom:10px;}

</style>

</head>



<body>

<div>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

       <ul>

           <li><img src="file:///D|/网页设计与制作/网页设计站点/images/pic_1.jpg"</li>

           <li>室外居家布局设计</li>

    </ul>

</div>

</body>

</html>

 首页导读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;}

.all{width:600px;height:300px;margin:50px auto;}

.one{width:600px;height:150px;background:url(images/banner1.jpg) no-repeat;}

.two{width:600px;height:32px;background:url(images/button1_bg.jpg);}

a:link,a:visited{font-size:14px;width:68px;height:32px;background:url(images/button1.jpg) no-repeat;float:left;color:#9BB40F;padding-top:8px;padding-left:12px;text-decoration:none;}

a:hover{width:68px;height:32px;background:url(images/button2.jpg) no-repeat;float:left;color:#FFF;padding-top:8px;padding-left:12px;}

</style>

</head>



<body>

<div class="all">

  <div class="one"></div>

       <div class="two">

           <a href="#">首页导读</a>

           <a href="#">首页导读</a>

        <a href="#">首页导读</a>

        <a href="#">首页导读</a>

        <a href="#">首页导读</a>

    </div>

</div>

</body>

</html>

 查 违

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;}

.all{width:613px;height:400px;margin:20px auto;position:relative;background:#1E2D3B;}

.left{background:url(images/road.png) no-repeat 70px 0px;float:left;width:332px;height:400px;}

.one{width:158px;height:177px;background:url(images/icon1.png) no-repeat;position:absolute;top:130px;left:6px;}

.one:hover{background:url(images/icon2.png) no-repeat;}

.two{width:98px;height:106px;background:url(images/icon3.png) no-repeat;position:absolute;top:130px;left:233px;}

.two:hover{background:url(images/icon4.png) no-repeat;}

.three{width:69px;height:78px;background:url(images/icon5.png) no-repeat;position:absolute;top:17px;left:127px;}

.three:hover{background:url(images/icon6.png) no-repeat;}

.four{width:45px;height:50px;background:url(images/icon7.png) no-repeat;position:absolute;top:10px;left:230px;}

.four:hover{background:url(images/icon8.png) no-repeat;}

.right{font-family:"微软雅黑";font-style:italic;float:right;margin-top:50px;height:400px;width:260px;}

h2{font-size:80px;color:#3F9ADE;}

.six{color:#535F6C;font-size:18px;font-family:"微软雅黑";margin-top:5px;font-weight:bold;}

.seven{margin-top:20px;}

</style>

</head>



<body>

<div class="all">

       <div class="left">

           <a href="#" class="one"></a>

           <a href="#" class="two"></a>      

           <a href="#" class="three"></a>   

           <a href="#" class="four"></a>   

    </div>

       <div class="right">

           <h2>查 违</h2>

        <p class="six">及时、迅速、精准、便捷</p>

           <p class="seven"><img src="images/car.png"  /></p>

    </div>

</div>

</body>

</html>

世界杯梦幻阵容-足球明星 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;list-style:none;}

.all{width:810px;height:430px;margin:20px auto;}

.top{width:780px;height:120px;}

.three{float:left;margin-left:20px;}

.four{float:right;}

.one{float:left;margin-left:10px;}

.two{font-size:14px;text-align:center;margin-top:5px;}

</style>

</head>



<body>

<div class="all">

       <div class="top">

           <p class="three"><img src="images/logo.png" width="200"/></p>

           <p class="four"><img src="images/title.png"  width="300"/></p>

    </div>

       <ul class="one">

           <li><img src="images/people1.png" width="150"/></li>

        <li class="two">C罗</li>

    </ul>

       <ul class="one">

           <li><img src="images/people2.png" width="150"/></li>

        <li class="two">梅西</li>

    </ul>

    <ul class="one">

           <li><img src="images/people3.png" width="150"/></li>

        <li class="two">内马尔</li>

    </ul>

    <ul class="one">

           <li><img src="images/people4.png" width="150"/></li>

        <li class="two">里贝里</li>

    </ul>

    <ul class="one">

           <li><img src="images/people5.png" width="150"/></li>

        <li class="two">得罗巴</li>

    </ul>

</div>

</body>

</html>

 商品专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;list-style:none;}

.all{width:700px;margin:20px auto;border-top:2px double #D4D4D4;border-bottom:2px double #D4D4D4;}

.one{margin-top:20px;}

li{float:left;margin-right:30px;margin-bottom:10px;}

p{clear:both;margin-bottom:20px;border-left:10px solid #CCCCCC;padding-left:5px;color:#8F8F8F}

span{color:#252525;}

</style>

</head>



<body>

<div class="all">

       <div class="one">

           <ul>

               <li><img src="images/things1.png"  /></li>

            <li><img src="images/things2.png"  /></li>

            <li><img src="images/things3.png"  /></li>

        </ul>

    </div>

       <p><span>蓝牙无线耳机:</span>保障无损传输的M3，由于雷柏H1000使用的M3无线音频解决方案的传输带宽可以达到2M，跳频式非压缩数据传输和数据打包及拼接协议。</p>

       <p><span>超级笔记本电脑:</span>保障无损传输的M3，由于雷柏H1000使用的M3无线音频解决方案的传输带宽可以达到2M，跳频式非压缩数据传输和数据打包及拼接协议。</p>

    <p><span>复古磁带蓝牙音箱:</span>保障无损传输的M3，由于雷柏H1000使用的M3无线音频解决方案的传输带宽可以达到2M，跳频式非压缩数据传输和数据打包及拼接协议。</p>

</div>

</body>

</html>

手机商城购物 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0;margin:0;}

.all{background:url(images/bg.png) no-repeat;width:346px;height:578px;margin:20px auto;padding-left:37px;padding-top:91px;}

.img{width:273px;height:410px;overflow:scroll;}

</style>

</head>



<body>

<div class="all">

       <div class="img"><img src="images/content.png" /></div>

</div>

</body>

</html>

 浮动与定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;boder:0px;list-style:none;}
body{font-family:"微软雅黑";font-size:12px;color:#FFF;}
.banner{width:1000px;height:285px;margin:13px auto 15px auto;overflow:hidden;}
.left{width:755px;height:285px;font-weight:bold;background:url(%E7%AC%AC%E4%B8%83%E7%AB%A0-images/sp_tu_2.jpg);position:relative;float:left;}
.content_left{position:absolute;top:90px;right:45px;text-align:right;}
.school_en{font-size:14px;}
.school_ch{font-size:24px;font-family:"黑体";background:url(%E7%AC%AC%E4%B8%83%E7%AB%A0-images/pic_1.jpg) no-repeat right center;}
.advertise{margin-top:20px;font-family:"黑体";font-size:16px;}
ul.style_a{margin-top:25px;margin-left:120px;list-style:none;overflow:hidden;}
ul.style_a li{float:left;margin-left:10px;}
ul.style_a li a{baackground:#FFF;boder:1px solid #ff7202;width:26px;height:22px;text-align:center;line-height:22px;vertical-align:middle;
display:block;color:#ff7202;font-size:18px;text-decoration:none;}
ul.style_a li.current a{width:30px;height:26px;line-height:26px;background:#ff7202;color:#FFF;margin-top:-2px;position:relative;}
.right{width:245px;height:285px;background:#1flele;float:right;position:relative;}
.content_right{position:absolute;top:50px;left:30px;}
ul.style_icon{margin-top:10px;}
ul.style_icon li{float:left;margin-right:12px;}
.cl{clear:both;margin-top:55px;margin-right:30px;text-indent:2em;line-height:24px;}
</style>
</head>
<div class="banner">
	<div class="left">
    	<div class="conter_left">
        	<p class="school_en">CHUANZHIBOKECHUAN<br />ZHIBOKE</p>
        	<p class="shool_ch">传智播客</p>
        	<p class="advertise">以就业为导向<br />打造理论与实践相结合的实战型人才</p>
        <ul class="style_a">
            <li class="current"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        </div>
    <div class="right">
    <div class="content_right">
        <h4>课程介绍<br />INTRODUCTION</h4>
        <ul class="style_icon">
            <li><a href="#"><img src="第七章-images/icon_r1_c1.png" /></a></li>
            <li><a href="#"><img src="第七章-images/icon_r1_c3.png" /></a></li>
            <li><a href="#"><img src="第七章-images/icon_r1_c5.png" /></a></li>
            <li><a href="#"><img src="第七章-images/icon_r1_c7.png" /></a></li>
            </ul>
        <p class="cl">在传智播客设计学院，您只需要花一份学费，就可以同时学习平面设计，网页设计，ui设计，flash设计四门主流技术。</p>
        </div>
    </div>
</div>
<body>
</body>
</html>

华为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
.one{width:316px;height:100px;margin:50px auto;border:1px solid #CCC;}
.two{width:180px;height:100px;font-size:12px;float:left;}
h1,p{padding-left:10px;padding-top:10px;}
h1{font-size:16px;}
.three{float:right;height:100px;}
</style>
</head>

<body>
<div class="one">
	<div class="two">
    	<h1>统一存储，大道智简</h1>
    	<p>华为执行副总裁徐直军；华为致力于通过提升管道容量，增强管道使能，优化管道管理，使管道更宽。</p>
    </div>
	<div class="three"><img src="images/content.jpg" /></div>
</div>
</body>
</html>

 

这是浮动块外围的文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.father{background:#ccc;boder:1px dashed #999;}
.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1px dashed #999;margin:15px;padding:0px 10px;}
.box01,.box02,.box03{float:left;}
p{background:#ccf;border:1px dashed #999;margin:15px;padding:0px 10px;}
</style>
</head>

<body>
<div class="father">
	<div class="box01">box01</div>
    <div class="box02">box02</div>
    <div class="box03">box03</div>
    <p>这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字，这里是浮动块外围的文字。
    </p>
</div>
</body>
</html>

pitytheriver
关注
专栏目录
jQuery网页版键盘打字练习代码
06-10
**jQuery网页版键盘打字练习代码详解** 在网页开发中，有时我们需要创建一些互动性强、用户体验良好的功能，比如打字练习应用。这个“jQuery网页版键盘打字练习代码”就是一个典型的例子，它允许用户通过鼠标或键盘...
一些前端和golang练习代码
06-07
通过实际的代码练习，学习者可以更好地理解这两个领域的核心概念，以及它们如何协同工作以创建完整的Web应用。 【标签】： 1. **前端**：前端开发通常涉及HTML、CSS和JavaScript，用于创建网页和应用程序的视觉部分...
源代码_前端网页制作_
09-30
【标题】"源代码_前端网页制作_" 涉及的知识点主要集中在前端开发领域，尤其是网页构建的基础和实践方面。前端开发是互联网应用的重要组成部分，它负责将设计师的创意和用户界面转化为可交互的网页。这个压缩包可能...
前端网页设计作业网页模板
04-28
在前端网页设计领域，网页模板扮演着至关重要的角色，它们为初学者和专业人士提供了一个快速构建网站的基础框架。"前端网页设计作业网页模板"通常包含了HTML、CSS、JavaScript等核心前端技术的预设布局和样式，帮助...
前端练习代码之css2.1
04-12
这个名为"前端练习代码之css2.1"的压缩包文件，显然是为初学者或者正在进阶的前端开发者设计的一系列练习项目，旨在帮助他们深入理解和熟练应用CSS2.1规范。CSS2.1是CSS的一个关键版本，它在2011年成为W3C推荐标准，...
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 432
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 430
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 941
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 1142
（微服务项目）新闻头条——Day1
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 1020
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
TypeScript 快速上⼿ （3：装饰器）
最新发布
每天都要努力学习哦~~
09-15 716
装饰器本质是一种特殊的函数，它可以对：类、属性、方法、参数进行扩展，同时能让代码更简洁。装饰器自2015年在中被提出到现在，已将近10年。截止目前，装饰器依然是实验性特性 ，需要开发者手动调整配置，来开启装饰器支持。装饰器有 5 种：1⃣类装饰器2⃣属性装饰器3⃣方法装饰器4⃣访问器装饰器5⃣参数装饰器备注：虽然中可以直接使用**类装饰器**，但为了确保其他装饰器可用，现阶段使用时，仍建议使用配置来开启装饰器支持，而且不排除在来的版本中，官方会进一步调整装饰器的相关语法！
完整版订单超时自动取消功能
qq_49979552的博客
09-15 1240
前几天对实习还是继续学习技术产生了抉择，问了一个前辈，他抛给我一个问题，怎么做15分钟订单自动取消，我说然后到时间之后，自动执行这个订单关闭业务，比如把锁了的库存给解开等等操作，然后在数据库里肯定要有体现，比如抖音，查我的订单内一块，在前段应该显示已过期，把支付的按钮变灰或者取消，支付的时候不能直接对库存进行操作，应该是支付模块调用订单模块调用库存模块。然后把理论予以实现，发现需要考虑的点还是有一些的。
react 基础语法
小白小白从不日别的博客
09-13 1753
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
前端——JS基础
m0_73557953的博客
09-12 235
字符串函数判断语句对象数组字符串、数字对象循环类和继承错误捕获3个点操作符回调函数和匿名函数。
React 中的事件绑定与参数传递
正是修行时，正是修行时，正式修行时...
09-11 469
React 中的事件绑定与参数传递
在子组件中使用props用于在父组件中给子组件变量设置值
ithongchou的博客
09-13 153
/传给父组件传值到此组件。
项目中遇到的问题
qiao
09-12 460
文件列表中有文件上传功能，点击上传按钮，弹出模态框，在模态框的形式选择文件，进行上传。
NEXT.js pageRouter useParams/useSearchParams 拿不到路由参数
weixin_44240581的博客
09-12 342
NEXT.js pageRouter useParams/useSearchParams 拿不到路由参数
react crash course 2024 (1)理论概念
2301_78916954的博客
09-14 361
而无需写一个class。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值