CSS美工体会

简介: CSS美工体会

1.每一块都应该有标签包裹,这样更好的提供上下文的定位,比如说:头部就必须有头部的父标签和对应的子标签,父标签提供相对定位,子标签绝对定位,用属性leftrighttop进行绝对定位

header{
Position:relative;
}
Header title{
Position:absolute;
}

2.父元素一般确定好基本的属性,高度,定位,超父类应该把基本的字体的属性设置好,以提供上下文。

3.样式:border-radius , box-shadow: 4px//水平偏移量 4px //垂直偏移量 5px //模糊量 8px //扩展量 #aaa //颜色;

Text-shadow:4px 4px 5px #555;

4.一般的文字的标签的属性:

Font-family font-weight font-size letter-spacing color line-height
Text-align font-style text-decoration

5.float标签用于分栏的布局中,有时候可以用于子元素的左右的定位中,导航的菜单中常常用,例如li标签,但是必须设置宽度

Input{
Float:right;
Width:70px;
}

6.动画:-webkit-transition:2s width;设置转化 -webkit-font-smoothing:设置平滑的字体

7.diplayblock inline inline-block:收缩包紧列表项

8.设置下拉菜单的时候可以用visibilityhidden;或者displaynone

Nav.menu li ul{
Visibility:hidden;
}
.no-csstransitions nav.menu li:hover > ul{
Display:block;
}

9.当设置了分栏的左右浮动时,可以用overflowhidden来包围浮动的子元素

Section#feature_area{
Overflow:hidden;
}
Section#feature_area article{
Float:left;width:66%
}
Section#feature_area aside{
Float:right;width:34%
}

10.登录表单的定位:

.signin section{
Overflow:hidden;
}
.signin section label{
Float:left;
Width:5em
}
.signin section input{
Float:right;
Width:10.5em;
}

11.定制项目符号:

#feature_area nav li:before{
Content:””;
Position:absolute;
Height:10px;//设置符号的大小
Width:10px;
}

12.弹出层:

Transform:rotate(degree)//旋转的特效
Transform-origin:left bottom//旋转的中心点
#book_area article aside{
Display:none;//隐藏弹出层
Position:absolute;
Z-index:2;设置弹出层的z轴的优先级
}
#book_area article:hover aside{
Display:block;//悬停在封面时显示弹出层
}

13.导航条的设置一般都是设置float:left; overflow:hidden;//强制的包围子元素;可以在导航条的左边设置竖线.list li + li a {border-left:1px solid #aaa}

14.多级的菜单是通过在li标签的后面添加ul-li实现的,然后通过父标签相对定位和子标签绝对定位来定位

相关文章
|
机器学习/深度学习 编解码 算法
【论文理解】ICCV2021-视频中小目标检测Dogfight
论文地址:https://arxiv.org/abs/2108.02092目标:在无人机飞行过程中捕获的背景杂乱的画面中检测其他无人机挑战:任意的移动(相机移动,目标也移动)小尺寸,只占画面像素的0.05%~0.07%(PASCAL VOC (22.62%) and ImageNet (19.94%))形状变换(拍摄角度不同,拍摄的无人机形状不同)遮挡基于region-proposal的方法无法捕
|
安全 测试技术 数据安全/隐私保护
【好用的个人工具】Docker环境下部署FileDrop文件共享工具
【2月更文挑战第13天】Docker环境下部署FileDrop文件共享工具
437 2
|
并行计算 Ubuntu 机器人
计算机视觉教程7-3:Openpose配置与实践
计算机视觉教程7-3:Openpose配置与实践
3253 0
计算机视觉教程7-3:Openpose配置与实践
|
程序员 C++
智能指针避坑指南——几种常见的错误用法
智能指针避坑指南——几种常见的错误用法
|
JavaScript
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
647 0
Vue子组件监听父组件的事件
|
3月前
|
Unix Linux 程序员
Linux文本搜索工具grep命令使用指南
以上就是对Linux环境下强大工具 `grep` 的基础到进阶功能介绍。它不仅能够执行简单文字查询任务还能够处理复杂文字处理任务,并且支持强大而灵活地正则表达规范来增加查询精度与效率。无论您是程序员、数据分析师还是系统管理员,在日常工作中熟练运用该命令都将极大提升您处理和分析数据效率。
335 16
|
3月前
|
Kubernetes Java 微服务
Spring Cloud 微服务架构技术解析与实践指南
本文档全面介绍 Spring Cloud 微服务架构的核心组件、设计理念和实现方案。作为构建分布式系统的综合工具箱,Spring Cloud 为微服务架构提供了服务发现、配置管理、负载均衡、熔断器等关键功能的标准化实现。本文将深入探讨其核心组件的工作原理、集成方式以及在实际项目中的最佳实践,帮助开发者构建高可用、可扩展的分布式系统。
479 0
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
396 2
|
机器学习/深度学习 存储 PyTorch
【深度学习】Pytorch面试题:什么是 PyTorch?PyTorch 的基本要素是什么?Conv1d、Conv2d 和 Conv3d 有什么区别?
关于PyTorch面试题的总结,包括PyTorch的定义、基本要素、张量概念、抽象级别、张量与矩阵的区别、不同损失函数的作用以及Conv1d、Conv2d和Conv3d的区别和反向传播的解释。
1175 2
使用 Playwright 复用 Cookie:简化自动化测试的高效方法
Playwright 提供的 Cookie 复用功能允许在不同测试用例间共享会话状态,提高测试效率。通过 `context.set_cookies()` 方法设置共享 Cookie 数据,确保会话在多个测试中保持一致。优点包括节省时间、维持稳定会话,但需注意可能增加测试用例间的依赖。使用此功能可优化自动化测试流程。

热门文章

最新文章