- 博客(16)
- 收藏
- 关注
RSS订阅原创 CSS弹性布局练习
给父元素开 display: flex ，用容器属性（flex-direction/justify-content 等）控制整体排列，用子元素属性（flex/align-self 等）调整个体弹性，就能快速实现灵活、自适应的布局。：想让一组元素（比如导航栏的 li、卡片列表 ）弹性排列，就给它们的父元素加 display: flex。效果：子元素（item ）默认横向排成一行（flex-direction: row ），且能自动“弹性”分配空间。
2025-06-11 20:12:31
215
原创 用HTML进行CSS浮动练习
语法：选中文档里的元素（用类、ID 或标签选择器），设置 float: left（靠左浮动）或 float: right（靠右浮动）。浮动（float: left/right）能让块级元素“并排”，常用于做导航、图文混排、多列布局（比如经典的“三栏布局” ）。用 float 让元素打破默认排版实现并排，再用清除浮动（如伪元素法）解决父元素高度塌陷，就能灵活做出多列、图文混排等布局。坑点：父元素里的子元素全浮动后，父元素会高度塌陷（变成 0 ，无法包裹子元素 ），导致页面布局乱套。1. 为什么用浮动？
2025-06-11 20:05:44
396
原创 CSS盒子的绝对定位
left/right：小方块（宽高 50px 、黑色），分别放 left: 100px/350px ，top: 100px ，是“眼睛”“耳朵”类的部件。face：大盒子（宽高 500px 、bisque 色），绝对定位到页面 left: 600px;mouse：白长条（300×60px ），绝对定位到 left: 100px;nose1：红方块（60×60px ），绝对定位到 left: 225px;nose2：黄方块（30×30px ），绝对定位到 left: 15px;选择器（对应页面元素）
2025-06-11 19:58:18
278
原创 CSS图像常用样式
给<div>元素添加2像素宽的边框，颜色用RGB模式设置。：给图片添加10像素宽的边框，颜色使用RGB模式设置，最后一位 0.106 是透明度值，边框样式为实线。width: 80%;：设置图片宽度为父元素宽度的80% ，是相对尺寸设置，可随父元素变化而调整。<div> 元素作为容器，里面嵌套了<img> 元素，src 属性指定了图片路径。：设置<div>元素高度为1000像素。：设定图片高度为620像素，是固定尺寸。：设置<div>元素宽度为1000像素。注意：图像网址需修改！注意：图像网址需修改！
2025-05-31 13:18:35
248
原创 CSS常用文本练习
为<p>元素添加2像素宽、红色、实线边框。：给文本添加下划线。：设置<p>标签内文本颜色为蓝紫色。：使段落文本水平居中对齐。：将字体大小设为50像素。：使文本以斜体显示。font-family: '楷体';
2025-05-31 13:06:10
179
原创 用HTML做表单表格练习
提交按钮：<input name="button" type="submit" value="提交">为默认风格提交按钮；<input name="button00" type="submit" class="btn00" id="button0" value="登录">应用.btn00样式，有特殊边框、背景色和透明度。自定义文本域：<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">应用.text1样式，改变边框和文字颜色。
2025-04-28 22:17:09
397
原创 用HTML进行复合选择器练习
img src="#" alt="文章配图" width="200" height="200">：插入一张图片，src="#" 是占位符，表示图片的实际路径未指定，alt="文章配图" 是图片无法显示时的替代文本，width 和 height 设置了图片的宽度和高度。<h1 align="center">厦门大学</h1>：创建一个一级标题，内容为“厦门大学”，align="center" 使标题居中显示（不过在 HTML5 中推荐使用 CSS 来设置对齐方式）。<br>可以使用<br>标签进行换行。
2025-04-19 20:35:08
898
原创 用HTML进行表单练习
设置了表格的边框（border="1rpx"）、宽度（width="400rpx"）、高度（height="200rpx"）和背景颜色（bgcolor="pink"）。用户名、密码、确认密码、出生日期、联系电话、电子邮件字段：都使用<input type="text">（密码字段用<input type="password">）来创建文本输入框，用户可以在其中输入相应信息。最高学历字段：同样使用<input type="radio">创建单选按钮，name="iteml"保证只能选择一个学历选项。
2025-04-19 20:25:08
359
原创 CSS引入样式配置优先级
2. 引入外部样式表：在与HTML文件同目录新建 .css 文件，在HTML的 <head> 标签内用 <link rel="stylesheet" href="文件名.css"> 引入，之后可在该CSS文件编写样式。3. 编写内部样式表：在HTML的 <head> 标签内添加 <style> 标签，在其中按CSS语法规则编写各类选择器样式，如标签、类、id选择器样式。5. 使用标签选择器：在CSS中直接写HTML标签名，如 p、div 等，后面大括号内定义对应标签元素的样式。
2025-04-13 15:19:54
313
原创 页面语义结构布局联系
4. 文章展示部分：<h3>标签表示“最新文章”标题，<h4>标签是文章的具体标题，<p>标签用于展示文章的内容简介，<img>标签原本应展示相关图片，但目前src属性值为占位符#，需要替换为真实图片地址。5. 侧边栏部分：<h5>标签定义“侧边栏”标题，<p>标签简单描述了侧边栏可能包含的内容，如快速链接、广告等。3. 导航栏部分：通过<ul>（无序列表）和<li>（列表项）组合，创建了一个简单的导航菜单，包含“首页”“关于我们”“校园风采”三个链接，其中“校园风采”链接到厦门大学官网的相关页面。
2025-04-07 19:12:20
197
原创 用HTML进行表格练习
◦ 第二个 <h2> 标签显示“合并单元格练习”标题，下面的 <table> 元素中，使用 colspan 属性合并列（如 colspan="2" 表示合并两列），使用 rowspan 属性合并行（如 rowspan="2" 表示合并两行），来模拟练习中单元格合并的效果。◦ 第一个 <h2> 标签显示“创建表格练习”标题，下面是一个 <table> 元素，通过 <tr>（表格行）和 <th>（表头单元格）、<td>（普通单元格） 组合展示了教师人数、学生人数和总人数在不同年份的数据。
2025-03-23 22:04:51
409
原创 用HTML制作商城支付向导
输入您的网银账号、登录密码、验证码</li><li>确定您在银行预留信息，点击确定</li><li>支付成功，提示“已完成付款”</li><li>选择您要使用的网上银行</li><li>货到付款</li><li>网银在线</li><li>财付通</li><li>支付宝商城支付向导
2025-03-23 21:43:54
475
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人