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

已于 2024-07-17 09:35:22 修改
阅读量129 收藏 2
点赞数 4
分类专栏： 网页设计 文章标签： 前端 css css3 html 学习
于 2024-07-17 09:34:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64077978/article/details/140485037
版权

创建三级列表

<!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>

</head>



<body>

<ul>

       <li>咖啡

           <ul>

                     <li>摩卡</li>

                     <li>蓝山</li>

              </ul>

    </li>

       <li>茶

           <ul>

                     <li>红茶</li>

                     <li>绿茶

                          <ol>

                                          <li>龙井</li>

                                          <li>碧螺春</li>

                                   </ol>

            </li>

              </ul>

       </li>

    <li>牛奶</li>

</ul>

</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:400px;height:189px;margin:100px auto;border:2px solid #0C3}

.one dt{float:right;}

.one dd{width:220px;height:189px;margin-left:20px;margin-top:20px;font-family:"微软雅黑";}

h1{color:#0C3;font-size:18px;margin-bottom:20px;}

p{font-size:14px;}

</style>

</head>



<body>

<dl class="one">

       <dt><img src="images/zhangpeng.jpg" /></dt>

    <dd>    

           <h1>谈华为的管道战略</h1>

           <p>华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。</p>

    </dd>

</dl>

</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">

div{border:1px solid #CCC;border-top:5px solid #F60;width:500px;height:250px;margin:100px auto;}

h1{border-bottom:1px solid #CCC;font-size:20px;padding-left:10px;padding-bottom:10px;}

ul{list-style:none;}

li{padding-bottom:15px;font-size:18px;list-style-image:url(images/hhh.jpg)}

a:link{color:#000}

a:visited{color:#F63}

a:hover{color:#39F}

</style>

</head>



<body>

<div>

       <h1>公司动态</h1>

       <ul>

              <li><a href="#">传智播客大型人才招聘会成功举行</a></li>

           <li><a href="#">设计免费公开课-授技数码照片图像精修技巧</a></li>

           <li><a href="#">花再多钱也买不来的uI面试神器免费送啦</a></li>

           <li><a href="#">传智播客2014版全新IT入门照教程光盘免费领</a></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;margin-top:10px;}
h2{background:#F99;width:300px;height:50px;padding-left:50px;margin-left:10px;}
p{background:#390;height:20px;margin-bottom:10px;margin-left:10px;}
a{background:#F99;font-size:14px;display:inline;margin-left:10px;}
d{background:#FF0;font-size:14px;display:inline;}
c{background:#CCC;font-size:14px;display:inline;}
</style>
</head>

<body>
<h2>h2标记定义的文本。</h2>
<p>p标记定义的文本。</p>
<a><strong>strong标记定义的文本。</strong></a>
<d><em>em标记定义的文本。</em></d>
<c><del>del标记定义的文本。</del></c>
</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">
dt{float:left;margin-right:20px;}
h2,h3{font-size:16px;}
h3{font-size:8px;}
</style>
</head>

<body>
<dl>
	<dt><img src="zhangpeng.jpg" /></dt>
	<dd>
    	<h2>张鹏（网页平面主讲老师，在北京/上海/广州授课）</h2>
   	 	<h3>职务：高级讲师，企业培训讲师</h3>
    	<h4>&nbsp;&nbsp;资深网站工程师和资深网站讲师，10年网站开发与教学工作经验，拥有上百个网站的成功案例，精通网站前端设计和php</h4>
    </dd>
</dl>
</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;color:}
div{width:820px;height:130px;background:#CCC}
h2{background:url(images/iconh.png) no-repeat;color:#C00;font-size:12px;padding-top:8px;padding-bottom:6px;padding-left:30px;height:18px;margin-left:10px;}
h3{background:url(images/play1.png) no-repeat;color:#C00;font-size:12px;padding-top:2px;padding-bottom:6px;padding-left:30px;height:18px;margin-left:720px;display:inline;}
li{display:inline-block;font-size:16px;width:105px;padding:10px;height:78px;padding-left:80px;list-style:none;}
.one{background:url(images/icon1.png) no-repeat #09C;margin-left:10px;}
.two{background:url(images/icon2.png) no-repeat #6CC;}
.three{background:url(images/icon3.png) no-repeat #3C6;}
.four{background:url(images/icon4.png) no-repeat #C69;}
</style>
</head>

<body>
<div>
 	<h2>MUSIC----精选歌单</h2>
    <h3>连播本页</h3>
    <ul>
    	<li class="one">
        	<h1>Radio</h1>
        	<p>音乐达人</p>
            <p>随便听听>></p>
        </li>
        <li class="two">
        	<h1>Song</h1>
        	<p>音乐达人</p>
            <p>最新单曲>></p>
        </li>
        <li class="three">
        	<h1>Album</h1>
        	<p>音乐达人</p>
            <p>音乐专辑>></p>
        </li>
        <li class="four">
        	<h1>MV</h1>
        	<p>音乐达人</p>
            <p>劲爆MV>></p>
        </li>
   </ul>
</div>
</body>
</html>

 

精选歌单（2）

<!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;color:}
div{width:820px;height:130px;background:#CCC}
h2{background:url(images/iconh.png) no-repeat left;color:#C00;font-size:12px;padding-top:8px;padding-bottom:6px;padding-left:30px;height:18px;margin-left:10px;}
h3{background:url(images/play1.png) no-repeat right;color:#C00;font-size:12px;padding-top:2px;padding-bottom:6px;padding-left:30px;height:18px;margin-left:720px;display:inline;}
li{display:inline-block;font-size:16px;width:105px;padding:10px;height:78px;padding-left:80px;list-style:none;}
.one{background:url(images/icon1.png) no-repeat #09C;margin-left:10px;}
.two{background:url(images/icon2.png) no-repeat #6CC;}
.three{background:url(images/icon3.png) no-repeat #3C6;}
.four{background:url(images/icon4.png) no-repeat #C69;}
</style>
</head>

<body>
<div>
 	<h2>MUSIC----精选歌单<h3>连播本页</h3></h2> 
    <ul>
    	<li class="one">
        	<h1>Radio</h1>
        	<p>音乐达人</p>
            <p>随便听听>></p>
        </li>
        <li class="two">
        	<h1>Song</h1>
        	<p>音乐达人</p>
            <p>最新单曲>></p>
        </li>
        <li class="three">
        	<h1>Album</h1>
        	<p>音乐达人</p>
            <p>音乐专辑>></p>
        </li>
        <li class="four">
        	<h1>MV</h1>
        	<p>音乐达人</p>
            <p>劲爆MV>></p>
        </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;}
.content{width:350px;height:137px;border:1.5px solid #693;}
.font3{color:#693;font-size:16px;padding:10px;}
p{font-size:13px;font-family:"微软雅黑";padding-left:20px;}
</style>
</head>

<body>
<dl class="content">
	<dt><img src="images/man_r1_c2.jpg" align="right"/></dt>
 <dd>
     <h3 class="font3">谈华为的管道战略</h3>
     <p>华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。</p>
 </dd>
</dl>
</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{border:#609 solid 2px;width:250px;height:350px;margin:100px auto;}
p{background:url(images/clock.png) no-repeat;font-size:22px;padding-left:40px;margin:20px;}
li{list-style:none;padding-left:45px;padding-top:12px;height:35px;width:160px;background:url(images/icon.png) no-repeat 10px #609;margin-left:20px;margin-bottom:5px;font-size:18px;color:#FFF;font-family:"微软雅黑";}
h2{background:url(images/back.png) no-repeat;madgrin:40px;font-size:22px;padding-left:40px;margin-left:20px;margin-top:15px;color:#609}
</style>
</head>

<body>
<div>
<p>7月30日0：00开团</p>
<ul>
	<li>新品团</li>
    <li>尝鲜团</li>
    <li>秒杀团</li>
    <li>清仓团</li>
</ul>
<h2>返回顶部</h2>
</div>

</body>
</html>

pitytheriver
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery网页版键盘打字练习代码
06-10
**jQuery网页版键盘打字练习代码详解** 在网页开发中，有时我们需要创建一些互动性强、用户体验良好的功能，比如打字练习应用。这个“jQuery网页版键盘打字练习代码”就是一个典型的例子，它允许用户通过鼠标或键盘...
一些前端和golang练习代码
06-07
通过实际的代码练习，学习者可以更好地理解这两个领域的核心概念，以及它们如何协同工作以创建完整的Web应用。 【标签】： 1. **前端**：前端开发通常涉及HTML、CSS和JavaScript，用于创建网页和应用程序的视觉部分...
源代码_前端网页制作_
09-30
【标题】"源代码_前端网页制作_" 涉及的知识点主要集中在前端开发领域，尤其是网页构建的基础和实践方面。前端开发是互联网应用的重要组成部分，它负责将设计师的创意和用户界面转化为可交互的网页。这个压缩包可能...
前端网页设计作业网页模板
04-28
在前端网页设计领域，网页模板扮演着至关重要的角色，它们为初学者和专业人士提供了一个快速构建网站的基础框架。"前端网页设计作业网页模板"通常包含了HTML、CSS、JavaScript等核心前端技术的预设布局和样式，帮助...
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
qq_30193097的博客
08-13 208
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 586
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1048
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 670
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
前端JS总结（中）
m0_54066656的博客
08-12 697
前端JS之内置对象总结，这很重要！！！
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 296
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 603
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 189
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 463
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
前端学习笔记-JS篇-04
Yvonne_hjj的博客
08-14 622
函数:function,是被设计为执行特定任务的代码块说明:函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于。比如前面使用的alert()、prompt()和console.log()都是一些，只不过已经封装好了，我们直接使用的。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 599
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【如何有效解决前端Vue中的常见难题】
zhaochen1127的博客
08-11 773
面对Vue项目中的性能优化、兼容性和安全性等难题，开发者需结合项目实际情况，采取合适的解决方案。通过代码分割、状态管理、服务端渲染等技术优化性能；利用PostCSS、Polyfill等工具解决兼容性问题；通过严格的输入验证、HTTPS传输等措施保障应用安全。同时，良好的团队协作和持续的技术学习也是解决难题、提升项目质量的关键。希望本文能为Vue开发者提供一些实用的参考和启发。
SpringSecurity+前端项目+redis完成认证授权的代码
m0_74194490的博客
08-12 436
（包含了对密码加密、用户认证授权、登录前后的权限设置==》开启允许跨域。①创建令牌---②校验令牌---③根据token获取自定义的信息。由于都是无返回值类型的，所有使用到了fastjson）
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1002
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值