随笔分类 -  Web.Css

1
摘要:效果: 实现一:绝对定位,精算师最爱。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圆角Img示例</title> <style type="text/css"> .parentDiv{ width:200px; heigh 阅读全文
posted @ 2021-12-20 21:46 逆火狂飙 阅读(239) 评论(0) 推荐(0) 编辑
摘要:制作圆角的关键在于设置img的border-radius属性。 先上效果图(此效果在最新FF和貌似老旧的Editplus3中都好用,没想到吧): 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圆角Img示例</titl 阅读全文
posted @ 2021-12-19 10:34 逆火狂飙 阅读(235) 评论(0) 推荐(0) 编辑
摘要:问题:某网页中用表格做了一左一右一下三个单元格,每个单元格里各放一个div,运行时发现右div里内容过多会覆盖下方div。 解决方案:给右div设置min-height或是设置display为table或是table-cell,设置后当右div被内容撑开时,所在的td也会跟着撑开,这样原始的一左一右 阅读全文
posted @ 2021-12-17 19:29 逆火狂飙 阅读(749) 评论(1) 推荐(0) 编辑
摘要:源码下载:https://files.cnblogs.com/files/heyang78/hvcenter_211214.rar 实现一:(在Editplus和chrome都通过) 先上图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- 阅读全文
posted @ 2021-12-14 19:13 逆火狂飙 阅读(1037) 评论(0) 推荐(0) 编辑
摘要:效果图: 以上图文混排效果实现的核心是设置img的float为left,其它都是常规设置,test的宽度对混排效果不影响。 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/ht 阅读全文
posted @ 2021-12-09 02:30 逆火狂飙 阅读(1380) 评论(0) 推荐(0) 编辑
摘要:CSS网文的一大毛病是只有代码没有图,这咋可以呢?!所以在这里我先上效果图,还为了大家看清特地保留了div的边框: 先说关键点,要让li水平排列,其display属性都应该是inline或是inline-block,下面的例子全用了inline-block; 要让li子项靠左,应该设置其float属 阅读全文
posted @ 2021-11-25 20:48 逆火狂飙 阅读(1738) 评论(2) 推荐(0) 编辑
摘要:效果图: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>标题</title> <style type 阅读全文
posted @ 2021-11-21 19:03 逆火狂飙 阅读(58) 评论(0) 推荐(0) 编辑
摘要:例子: margin:3px 4px 5px 6px; 说明:上外边距3px 右外边距4px 下外边距5px 左外边距6px 这四项是按顺时针排列的,第一项在12点方向 第二项在3点方向 第三项在6点方向 第四项在9点方向 做成表格更方便记忆: margin/padding 3px 4px 5px 阅读全文
posted @ 2021-11-21 13:31 逆火狂飙 阅读(79) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2021-11-21 13:23 逆火狂飙 阅读(81) 评论(0) 推荐(0) 编辑
摘要:先上效果图: 再上代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>标题</title> <style 阅读全文
posted @ 2021-11-21 13:16 逆火狂飙 阅读(132) 评论(0) 推荐(0) 编辑
摘要:.div1{ float:left; width:100px; } .div2{ float:right; width:200px; } 阅读全文
posted @ 2021-11-21 09:47 逆火狂飙 阅读(143) 评论(0) 推荐(0) 编辑
摘要:.div{ clear:both; width:100%; display:block; } clear:both是其中核心一句。 阅读全文
posted @ 2021-11-21 09:45 逆火狂飙 阅读(215) 评论(0) 推荐(0) 编辑
摘要:.div{ margin:0 auto; width:128px; } margin:0 auto;几乎是块级元素水平居中的通用途径。 阅读全文
posted @ 2021-11-21 09:25 逆火狂飙 阅读(271) 评论(0) 推荐(0) 编辑
摘要:现在分页控件很多,可我一个也不想用,因为...就是这么倔。好了,废话少说,下面正文开始。 要分页,需要后台,服务和前台js、css密切配合,于是正文就分成四部分: 1.后台数据库的部分 数据库部分需要两个函数,一个是查总数量的,一个是查某一页的数据的。 import java.util.List; 阅读全文
posted @ 2021-11-07 19:57 逆火狂飙 阅读(173) 评论(0) 推荐(0) 编辑
摘要:先上效果图: 再上代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>ul中li居中示例</title> 阅读全文
posted @ 2021-11-07 18:37 逆火狂飙 阅读(829) 评论(0) 推荐(0) 编辑
摘要:此手段容易,见效快,副作用小, Html代码是: <div id="blueTabDiv"> <ul> <li><a href="" class="active">接口信息</a></li> <li><a href="">返码说明</a></li> <li><a href="">示例代码</a></ 阅读全文
posted @ 2021-10-30 16:45 逆火狂飙 阅读(142) 评论(0) 推荐(0) 编辑
摘要:需求:实现一个tabbed菜单 html代码: <div id="blueTabDiv"> <ul> <li><a href="" class="active">接口信息</a></li> <li><a href="">返码说明</a></li> <li><a href="">示例代码</a></l 阅读全文
posted @ 2021-10-30 08:48 逆火狂飙 阅读(237) 评论(0) 推荐(0) 编辑
摘要:代码下载:https://files.cnblogs.com/files/xiandedanteng/TwoColumnLayout.rar 效果展示: 代码: 阅读全文
posted @ 2017-09-02 09:17 逆火狂飙 阅读(554) 评论(0) 推荐(0) 编辑
摘要:有篇博客园网友‘云轩奕鹤’的文章不错,转载在这里以供需要时查阅。 http://www.cnblogs.com/jadeboy/p/5107471.html 阅读全文
posted @ 2017-01-10 23:24 逆火狂飙 阅读(165) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2017-01-07 15:50 逆火狂飙 阅读(21359) 评论(0) 推荐(0) 编辑

1
生当作人杰 死亦为鬼雄 至今思项羽 不肯过江东
点击右上角即可分享
微信分享提示