HTML/CSS入门
关注
分享
扫一扫
一只麻鼠
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
移动端项目初始化设置（HTML/CSS）
1.normalize.css 2. /* 初始化 */ body { min-width: 320px; max-width: 540px; margin: 0 auto; font: normal 14px/1.5 PingFangSC-regular, Tahoma, 'Lucida Grande', Verdana, 'Microsoft Yahei', STXihei, hei; color: #000; background: #f2f2f原创 2022-03-29 14:12:54 · 520 阅读 · 0 评论 -
前期学习问题及相应思考
transform和background-position的区别 background-position的定位是基于原图进行定位的，而不是根据自己定义的图片宽度进行定位的，因此想要实现背景图片连续不断的移动，需要在动画效果结束部分设置原图（-宽度px）进行前后图片衔接 双面反转效果无法实现 在反面的样式中添加一句backface-visibility: hidden; 谁是反面就给谁加 perspective的数值在设置时要大于translateZ的数值 preserve-3d无法继承，原创 2022-03-29 14:05:47 · 186 阅读 · 0 评论 -
电商网站logo常用实现方法HTML/CSS
网站logo一般采用的html结构为： div>h1>a 例子 <div class="logo"> <h1> <a href="index.html">小米官网</a> </h1> </div> a标签内一般含有网站名字，后期用CSS样式隐藏 logo图标一般采用背景图片的模式来显示 CSS书写时需要给h1标签和a标签设置宽高，主要背景图片等都给a标签设置 例子 .原创 2022-03-15 18:25:44 · 1037 阅读 · 0 评论 -
HTML/CSS鼠标悬停实现logo图片滑动切换
核心实现方法： 利用定位+透明度+设置外边距切换显示图片，过渡属性调节切换时间 整体盒子设置宽高背景色，利用伪元素设置要切换的两张图片 例子：小米logo左侧滑动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2022-03-12 19:38:15 · 2261 阅读 · 0 评论 -
HTML+CSS搜索框拼接/CSS3实现背景颜色渐变
HTML/CSS搜索框 核心：搜索框大盒子不要加宽高，里面文本输入框与搜索的button用float拼接 <div class="search"> <input type="text" placeholder="请输入关键字"> <button></button> </div> .header .search input { float: left; padding-left: 16px; width:原创 2022-03-10 19:52:03 · 791 阅读 · 0 评论 -
CSS固定定位固定在版心一侧算法
CSS固定定位版心靠左原创 2022-03-09 11:15:05 · 399 阅读 · 0 评论 -
HTML/CSS静态页面项目准备
目录 1 文件和目录准备 1.1 新建项目文件夹文件夹，文件夹命名使用英文字母 1.2 根目录存放文件 1.2.1 .ico 标题图标文件 1.2.2 images目录文件夹 1.2.3 uploads目录文件夹 1.2.4 css目录文件夹 1.2.5 index.html文件 2 项目代码准备 index.html文件 SEO三大标签：title、description、keywords 引入标题图标.ico文件 按顺序引入CSS文件 base.css文件准备 1 文件和目原创 2022-03-06 14:50:42 · 271 阅读 · 0 评论