html学习日记part07

  使用<a>标签,链接到另一个页面

  <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

  在新建浏览器窗口中打开链接

  <a href = "目标网址" target="_blank">链接显示的文本</a>

 

  使用mailto在网页中链接Email地址

 

  如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

  

  认识<img>标签,为网页插入图片

  <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

  举例:

  <img src = "myimage.gif" alt = "My Image" title = "My Image" />

  

1、src:标识图像的位置;

2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF,PNG,JPEG格式的图像文件。

 

转载于:https://www.cnblogs.com/JLU-lp/p/5657673.html

如果你希望 **“PNG Part No.:”、“Customer:”、“Customer code:”** 这三个字段 **在同一行中,并且** **均分宽度**,可以使用 `Flexbox` 布局,让父容器为 `display: flex;`,并为每个子项设置 `flex: 1;`,这样它们就会自动平均分配容器的宽度。 --- ## ✅ 示例代码 ### ✅ CSS 样式 ```css .row { display: flex; width: 100%; gap: 10px; /* 三列之间的间距 */ margin-bottom: 15px; } .col { flex: 1; /* 均分宽度 */ display: flex; align-items: center; } .col input[type="text"] { flex: 1; padding: 4px; box-sizing: border-box; } .col label { white-space: nowrap; margin-right: 10px; font-weight: bold; } ``` ### ✅ HTML 结构 ```html <!-- 一行中的三列:均分宽度 --> <div class="row"> <!-- PNG Part No. --> <div class="col"> <label>PNG Part No.:</label> <input type="text" /> </div> <!-- Customer --> <div class="col"> <label>Customer:</label> <input type="text" /> </div> <!-- Customer code --> <div class="col"> <label>Customer code:</label> <input type="text" /> </div> </div> ``` --- ## ✅ 效果说明 | 元素 | 说明 | |------|------| | `.row` | 使用 `display: flex;`,使子元素在同一行排列 | | `.col` | 使用 `flex: 1;`,确保每个字段均分宽度 | | `gap: 10px;` | 控制三列之间的间距,使布局更美观 | | `<input>` 使用 `flex: 1;` | 确保输入框填满剩余空间 | --- ## ✅ 可选扩展:响应式布局 如果你希望在小屏幕上自动换行,可以使用媒体查询: ```css @media (max-width: 768px) { .row { flex-direction: column; } } ``` 这样在小屏幕上,三列会自动垂直排列。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值