网页编写逻辑

网页编写

网站logo

<a href="" class="logo">logo名</a>

设置css reset命名rest.css文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
a{
    text-decoration:none;
}
ul{
    list-style:none;
}

设置common css命名common.css文件

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
<!--清除浮动-->

设置背景图片:


css中写入min-height/min-width设置最小最大

  • 行内元素有浮动里就可以设置margin,padding

figure标签

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

  • 页面显示小图片的地方尽量用小px的图片,图片太大影响页面性能
    a:hover::before{
        
    }
    
<!--显示圆形-->

border-radius:50%;
<!--设置圆形-->

css设置透明度

.box{
    opacity:0.8;
}

div盒内加遮罩

.box{
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:red;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,682评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,385评论 19 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,688评论 32 459
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,991评论 0 1
  • 文/其乐龙融 一面冬波摇落日,长桥信步步翩跹。 龟蛇二将[1]和平握,南北两方经济牵[2]。 天堑[3]流情滋万里...
    其乐龙融阅读 4,592评论 2 4