HTML和CSS实战项目

最新推荐文章于 2024-08-01 09:59:14 发布
最新推荐文章于 2024-08-01 09:59:14 发布
阅读量1.2k 收藏 14
点赞数 2
分类专栏： CSS 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53568983/article/details/125660540
版权

HTML项目

这部分HTML项目的CSS最多不超过两个，学习者可以不使用CSS，效果差不多

1.图文列表

1.1涉及标签
a 标签：
链接标签，属性有href（链接）
img 标签
src:链接图片，alt：图片放不出来时的图片，height:高和宽标签设置一个就可以了
1.2样式效果

1.3代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>yknb</title>
    <style>
        table{
            border:15px solid gray;
        }
        th,td{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<ul">
    <li><a href="https://www.php.cn/course/837.html"><img src="https://img.php.cn/upload/course/000/000/068/625e5dfcbd1c6699.jpg" alt="这是一个前端项目" width="100">HTML教程</a></li>
    <li><a href="https://www.php.cn/course/1039.html"><img src="https://img.php.cn/upload/course/000/000/068/62612317099e9449.jpg" alt="Python" width="100">Python教程</a></li>
    <li><a href="https://www.php.cn/course/639.html"><img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="PHP" width="100">PHP教程</a></li>
</ul>
</body>
</html>

2.导航组件

2.1标签
ul
li
ol
2.2样式效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>yknb</title>
    <style>
         ul li{float: left;    
    width: 100px;     
    height: 30px;    
    background-color:pink    
    border： 1px solid 6495ED;  
    text-align: center;     
    line-height: 30px; }
ulli:hover{background-color: aqua;}   
ul li:hover a{color: black;}   
    </style>
</head>
<body>
<ul>
    <li><a href="#">导航图片</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">提出问题</a></li>
    <li><a href="#">疑难解答</a></li>
</ul>
</body>
</html>

3.课程表

3.1样式效果

3.2代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>yknb</title>
    <style>
        table{
            border:15px solid gray;
        }
        th,td{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<table >
    <caption>小学课程表</caption>
    <thead style="background-color: green">
        <tr>
            <th>时间</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">上午</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>英语</td>
            <td>体育</td>
        </tr>
        <tr>
             
            <td>语文</td>
            <td>法律</td>
            <td>科学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>
        <tr>
             
            <td>音乐</td>
            <td>语文</td>
            <td>英语</td>
            <td>电脑</td>
            <td>数学</td>
        </tr>
        <tr>
             
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td colspan="6" style="text-align: center">中午休息</td>
             
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>音乐</td>
        </tr>
    </tbody>
    <tfoot bground-color="back">
        <tr>
            <td>备注：</td>
            <td colspan="5">每天晚上必须写完作业回家</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

4.购物车

4.1样式效果

4.2代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>yknb</title>
    <style>
        table{
            border:15px solid gray;
        }
        th,td{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
   <table >
    <caption>我的购物车</caption>
    <thead>
        <tr>
            <th>选购商品</th>
            <th>价格</th>
            <th colspan="3">介绍</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>沐浴露</td>
            <td>23</td>
            <td  colspan="3">xxx</td>
             
        </tr>
        <tr>
            <td>洗发水</td>
            <td>23</td>
            <td  colspan="3">xxx</td>
             
        </tr>
        <tr>
            <td>护发素</td>
            <td>23</td>
            <td  colspan="3">xxx</td>
             
        </tr>
    </tbody>
   </table>
</table>
</body>
</html>

5.学生简介表

5.1样式

在这里插入图片描述

5.2代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
          caption{
            color: aqua;
          }
    </style>
</head>
<body>
   <table border="2">
    <caption>学生基本表 </caption>
        <thead>
            <tr>
                <th>编号</th>
                <th cowspan="3">姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td cowspan="3">吴昊</td>
                <td>男</td>
            </tr>
            <tr>
                <td>003</td>
                <td cowspan="2">轻微的</td>
                <td>男</td>
            </tr>
        </tbody>
   </table>
</body>
</html>

6.登录列表

6.1样式

在这里插入图片描述

6.2代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
          caption{
            color: aqua;
          }
          table{
            text-align: center;
          }
    </style>
</head>
<body>
   <table border="2">
     <caption>用户登录表</caption>
     <form action="action.php" method="post">
     <thead>
        <tr>
            <th colspan="2"><label for="uname">用户名</label></th>
            <th colspan="5"><input type="text" id="uname" name="name"></th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td colspan="2"><label for="password">用户密码</label></td>
            <td colspan="5"><input type="password" id="password" name="password"></td>
        </tr>
        <tr>
            <td colspan="2"><label for="secret">性别</label></td>
            <td colspan="5">
                <input type="radio" id="male" name="sex" value="male"><label for="male">男</label>
                <input type="radio" id="female" name="sex" value="female"><label for="female">女</label>
                <input type="radio" id="secret" name="sex" value="secret" checked><label for="secret"></label>
            </td>
        </tr>
        <tr>
            <td colspan="2"> <label for="photography">爱好：</label></td>
            <td colspan="5">
                <input type="checkbox" id="game" name="habby[]" value="game" checked><label for="game">游戏</label>
                <input type="checkbox" id="trave" name="habby[]" value="trave" checked><label for="trave">旅行</label>
                <input type="checkbox" id="photograph" name="habby[]" value="photography" checked><label for="photograph">摄影</label>
            </td>
        </tr>
        <tr>
            <td colspan="7">
            <label for="degree">学历</label>
            <select name="degree" id="degree">
                <option value="1" selected disabled>--请选择--</option>
                <option value="2">高中</option>
                <option value="3">大学</option>
                <option value="4">研究生</option>
            </select>
        </td>
        </tr>
        <tr>
            <td colspan="6"><button class="button">提交</button></td>
        </tr>
     </tbody>
    </form>
   </table>
</body>
</html>
安全天天学
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML实战案例
01-09
HTML+CSS各阶段实战案例代码，适合html初学者实战练习，绝对正确无误！
HTML和CSS项目：HTML和CSS项目
02-19
HTML和CSS项目 HTML和CSS项目
HTML+CSS项目实战
m0_48069349的博客
08-14 1120
这里实战的网站是小米商城。首先是项目的搭建 引入favicon和css，这个commoncss就是一个公共的css。成为一个合格的页面重构师所有的公共样式书写到 中 这里的list-style: none;就是可以清除小点。a元素里面的color: inherit;这个是在之前的属性计算里面讲过 通用容器 这个是小米商城上有很多都符合这个特征。这部分属于CSS3的知识，现阶段只需要知道如何使用即可在页面所有样式之前引入一个CSShttps://at.alicdn.com/t/font_2960521_r
HTML + CSS 学习指南：从入门到精通
最新发布
qq_22232065的博客
08-01 653
HTML 和 CSS 在网页开发中扮演着至关重要的角色。HTML 如同网页的骨架，为网页提供了基本的结构和内容。它使用各种标签来定义页面的元素，如标题、段落、图片、链接等，确保信息得以有条理地组织和呈现。CSS 则恰似网页的华服，负责赋予网页美观的外观和舒适的布局。通过控制字体、颜色、背景、间距等样式属性，CSS 让网页变得更加吸引人，提升用户的阅读和交互体验。二者之间的关系紧密且相辅相成。HTML 为 CSS 提供了可操作的基础元素，而 CSS 则依据 HTML 的结构来施展其美化和布局的魔法。
【重识 HTML + CSS】项目实战
萌宅鹿的技术小屋
06-30 369
项目实战常见项目目录CSS Reset 博文集合：【重识 HTML + CSS】知识点目录 常见项目目录 header LOGO \ 导航 \ 搜素框 \ 登录注册 \ Slogan main 核心内容 \ 产品内容 footer 友情链接 \ 网站备案 \ 版权信息 CSS Reset reset.css：对浏览器的一些默认样式进行重置，编写一些经常使用的样式 @charset "UTF-8"; body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5,
HTML+CSS实战项目
weixin_34290000的博客
11-23 2847
学习了billiepander博客的代码。原链接奉上：https://www.cnblogs.com/pengsixiong/p/4945040.html稍微改动了些，换成自己的东西。页面和代码分享出来哈。发现写页面也没想象中那么难。有错误望指正。HTML:<!DOCTYPE html> <html lang="en" dir="ltr"> <head> ...
项目中必须知道有关css和html的常识
weixin_30375247的博客
06-05 68
根据模块化的思想，将目录划分为html，css，image三大部分。css部分：（base.css、globa.css和mod文件夹）1、base.css放置的是reset，clearfix等基础类和工具类；2、globa.css放置的是布局样式，包括header，footer等样式；3、mod文件夹下面放置的模块，组件的样式；html部分：（mod文件夹和template文件夹）1、mod文件夹...
HTML+CSS提升小实战
HiterCoder
08-20 201
HTML+CSS提升小实战 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>几米简介</title> 5 ...
8年前端带你HTML+CSS入门到实战（附视频+源码）
xingyu_qie的专栏
12-11 1441
本文主要是解决： 想要自学前端开发；但又不太想看博客文章； 觉得自学有点吃力，有点不知道学习步骤的同学
HTML&CSS实战项目------电商站首页布局
uioiu
11-25 3949
项目源自表严肃，他的个人网站：https://biaoyansu.com/ 预览： 预览 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>香菇街 - 你的剁手街</title> &lt...
HTML+CSS基础知识到项目实战（三）
qq_62599142的博客
08-01 143
前端基础知识，希望对大家有所帮助。
HTML5+CSS3实例源码（包含20个）
02-16
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
html5项目实战
06-12
html5项目实战，可以参考一下
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML项目实战
09-10
这是一个关于HTML的项目 很不错
html代码_前端HTML实战项目+源代码
weixin_39633054的博客
11-28 1764
第一个实战项目：（仅仅记录学习生活，还望老猿勿喷！）代码：<!DOCTYPE HTML><!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000" http-equiv="X-UA-Compatible"> <TITLE>我的第一个页面</T...
html布局_HTML响应式布局项目实战【完结】
weixin_39915081的博客
12-01 264
本章主要开始如果将前两个项目再进行重构，设计成既可以在 PC 端正常显示，又可以在 PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。一．旅游资讯响应式html 部分直接移植 PC 端即可css 部分.tour { position: relative; border: 1px solid #eee; margin: 0 0 20px 0; ba...
前端项目实战（一）：html+css实现简单雏形博客园
一点一滴铺就人生
06-24 1184
效果展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>吴晋丞的博客</title> <link rel="stylesheet" href="style.css"> </head> <body> <!--左侧主要内容栏--> <div id="d1">
htmlcss实战项目案例
06-20
HTML、CSS和JavaScript的实战项目案例通常涉及创建交互式的网页应用，这里有一些常见的项目示例： 1. **响应式网站**：利用CSS媒体查询，为不同设备（如桌面、平板和手机）设计灵活的布局，如博客、电子商务网站或个人简历页面。 2. **静态网页构建**：使用HTML构建内容丰富的静态网页，如新闻站点、相册展示或产品目录。 3. **CSS3动画**：创建动态效果，比如按钮 hover 动画、轮播图或过渡效果。 4. **网页布局练习**：学习 Flexbox 或 CSS Grid 来实现复杂的网格布局，如导航栏、侧边栏或网格列表。 5. **响应式导航菜单**：通过 JavaScript 或 jQuery 实现点击切换菜单项，适应屏幕大小的变化。 6. **表单验证**：使用 HTML 表单和 JavaScript 来验证用户输入，比如邮箱格式、密码强度等。 7. **交互式图表**：结合数据可视化库如 D3.js 或 ECharts，创建动态图表。 8. **游戏开发**：简单的 HTML5 Canvas 游戏，比如打砖块或井字棋。 9. **单页应用**：使用 frameworks 如 React、Vue 或 Angular 构建可路由的单页面应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安全天天学

你的鼓励是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值