html / css
文章平均质量分 53
lcwlucky
这个作者很懒,什么都没留下…
展开
-
实现简易的可调节宽度侧边栏
使用qq的时候发现了左侧可以调节大小,效果如下,于是自己手动实现了一个类似的小demo首先是html结构,主要有两部分,左侧侧边栏和右边主内容区域。flexible是左侧侧边栏,main为右边主内容区域,bar表示拖动条<div class="container"> <div class="flexible"> <div class="content"> <img src="http://img1.i原创 2020-05-10 15:04:59 · 1482 阅读 · 0 评论 -
WebSocket实现简易版的多人聊天室
一、websocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。(百度百科)二、多人聊天室的实现1、后端服务器(1)后端...原创 2020-01-30 17:13:36 · 1347 阅读 · 3 评论 -
css中width、height、margin、padding默认值总结
默认值 left top right bottom width height:默认值为 auto marginpadding: 默认值为 0 百分比参照于谁 width margin padding: 包含块的width height: 包含块的height left: 包含块的width top: 包含块的heigh...原创 2019-06-18 16:09:58 · 2608 阅读 · 0 评论 -
Flex布局教程
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地...原创 2019-08-25 15:31:16 · 158 阅读 · 0 评论 -
前端三栏布局:左右宽度固定,中间自适应常见的几种解决方式
方式一:浮动 方式二:定位 方式三:flex 方式四:表格布局 方式五:grid网格布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局几种实现方式</title> <style>...原创 2019-09-05 18:29:12 · 414 阅读 · 1 评论