补充CSS

对于标签的一些潜在属性、样式进行补充,拓展用法;

text-decoration: none;
文字修饰;经常用来改变链接样式,去掉下划线;


text-indent: 50px;
首行缩进;


direction: rtl;
文字方向;从右往左排列;


letter-spacing: 5px;
文字间距(每个字之间,英文就是每个字母之间)


vertical-align: middle;
设置元素的垂直对齐(有多个值可供选择,还可以用像素值,百分比等)


表格有双边框

border-collapse: collapse;
进行合并


总结:

这一篇会一点点的添加,根据学的越来越多,补充的也就越来越多了;



当然可以,这里我会给出一些基本的CSS和JavaScript代码片段,你可以将其嵌入到上述HTML结构中。CSS负责美化界面,而JavaScript则可以添加一些交互功能。 **CSS (styles.css)**: ```css /* 遮罩层 */ .modal { display: none; /* 显示默认隐藏 */ position: fixed; z-index: 1; /* 设置层级 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 允许滚动 */ } /* 透明度渐变背景 */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); /* 可调整透明度 */ } /* 样式化的模态框 */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 中心位置 */ padding: 20px; border: 1px solid #888; width: 80%; /* 调整宽度 */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } ``` **JavaScript (假设我们有一个按钮触发modal显示):** ```javascript // 获取DOM元素 var modal = document.getElementById('myModal'); var btn = document.getElementById('openModalBtn'); var span = document.getElementsByClassName("close")[0]; // 显示模态框 function openModal() { modal.style.display = "block"; } // 隐藏模态框 function closeModal() { modal.style.display = "none"; } // 点击关闭按钮时隐藏模态框 span.onclick = function() { closeModal(); } // 按钮点击事件 btn.onclick = openModal; ``` 这些代码只是最基本的模板,实际项目中你可能需要根据具体的UI设计和交互需求进行更详细的定制。记得将这些代码分别保存成`styles.css`和`script.js`文件,并在HTML中引用它们。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值