用css做出来这个 求大神解答
电脑
2024-08-12
如何用html+css做出这个静态网页 求大神解答
以前我也做过类似的这种静态页面,其实每一块的布局都差不多,做好一个其他的大同小异,下面提供我的思路以供参考(宏观角度): 第一:先把整体框架搭起来,通过绝对定位确定大的模块的位置。 第二:根据图中每一块的结构来选择table或者其他布局方式。 第三:需要精确的时候可以用div块来调试,出现细节问题可以查资料解决一下。请问 怎么样可以用css做出来这样的样式 能具体写一下代码么 谢谢
用CSS代码设定按钮的圆角样式,这个在css3中才能实现,通过使用border-radius来实现这个效果,不过有浏览器的兼容性问题,-moz(例如 -moz-border-radius)用于Firefox;-webkit(例如:-webkit-border-radius)用于Safari和Chrome;border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px,右的圆角15px,下的圆角20px,左的圆角25px,通过例子来实际看下: #round { padding:10px; width:300px; hei求CSS大神,图中这个边框怎么做出来
思路:一个矩形,一个正方形,将正方形的边框去掉两边,留两边,这样就形成了一个打开的三角形,然后旋转打开的三角形,利用相对定位移动到矩形右侧,接着将正方形的背景颜色设置白色,覆盖矩形右侧边框。
body>div{
width:300px;
height:200px;
border:1pxsolidred;
padding:10px;
}
/*矩形*/
#rectangle{
width:80px;
height:20px;
border:1pxsolid#CEEBD4;
float:left;
padding:5px05px10px;
color:#808280;
}
/*三角形*/
#triangle{
width:15px;
height:15px;
border-left:1pxsolid#CEEBD4;
border-bottom:1pxsolid#CEEBD4;
float:left;
position:relative;
left:-8px;
top:8px;
background-color:white;
/*旋转*/
-webkit-transform:rotate(-135deg);
}