网页设计知识

<!doctype html> <html> <head><meta charset="utf-8" /><title> 网页设计知识 - 腾云网 </title><meta id="description" name="description" content="始创于2008年，智慧网络营销服务提供商，历经10多年，服务客户超万家，遍布国内600多个城市。" /><meta id="keywords" name="keywords" content="腾云网,网站建设,做网站,建站,建网站,网站制作,腾云官网,网络营销推广,SEO优化,百度关键词排名" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/fresh/css/ML_index.css?v=1019" /><link rel="stylesheet" href="/fresh/css/ML_animate.min.css" /><link rel="stylesheet" href="/fresh/css/ML_swiper.min.css" /><link rel="stylesheet" href="/fresh/ML_font-awesome/css/font-awesome.css" /><link rel="stylesheet" href="/fresh/css/ML_siteTemplete.css" /> <script src="/fresh/js/ML_jquery.min.js"></script> <script src="/fresh/js/ML_swiper.min.js"></script> <script src="/fresh/js/ML_wow.js"></script> <link rel="stylesheet" href="/fresh/css/innerStyle.css" /><link rel="stylesheet" href="/fresh/layui-v2.7.6/layui/css/layui.css" /> <script src="/fresh/layui-v2.7.6/layui/layui.js"></script> <script src="/fresh/js/api.js"></script> <style> @media only screen and (min-width: 996px) { .Ml_temlpate_news_2 { width: 100%; } .newitem2 { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px dashed #e5e5e5; align-items: center; } .newitem2left { width: 85px; height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f2f2f2; } .newitem2left strong { font-size: 25px; color: #000; display: block; text-align: center; font-weight: normal; } .newitem2left p { font-size: 14px; color: #000; margin-top: 4px; text-align: center; } .newitem2right { flex: 1; padding-left: 15px; } .newitem2right a { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 16px; color: #444; margin-bottom: 15px; } .newitem2right a:hover { color: var(--main-color) !important; } .newitem2right p { font-size: 13px; color: #777; line-height: 25px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media only screen and (max-width: 996px) { .main_body { margin-top: 70px; } .M_inbanner { display: none; } .Ml_temlpate_news_2 { width: 100%; } .newitem2 { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px dashed #e5e5e5; align-items: center; } .newitem2left { width: 85px; height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f2f2f2; } .newitem2left strong { font-size: 25px; color: #000; display: block; text-align: center; font-weight: normal; } .newitem2left p { font-size: 14px; color: #000; margin-top: 4px; text-align: center; } .newitem2right { flex: 1; padding-left: 15px; } .newitem2right a { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 16px; color: #444; margin-bottom: 15px; } .newitem2right p { font-size: 13px; color: #777; line-height: 25px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } </style> </head> <body style="background-color: #f4f4f4" class="siteTempleteBody"> <script type="text/javascript"> gethead(); </script> <div class="M_inbanner"> <img id="link" src="" /> <script type="text/javascript"> var link = getpicimorpantion(12); link = JSON.parse(link); $("#link").attr("src", homeurl + "/" + link.Path); </script> </div> <div class="main_body">  <style> .on { background-color: #e9eaee !important; color: var(--main-color) !important; border-bottom: 3px solid var(--main-color) !important; } </style> <div class="main_left"> <ul> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow1.png" alt=""> <img class="s_img" src="/images/know1.png" alt=""> <span>新手上路</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/help/162.htm">建站流程</a> <a href="/register">注册会员</a> <a href="/News/195.htm">使用教程</a> <a href="/findpwd">找回密码</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow2.png" alt=""> <img class="s_img" src="/images/know2.png" alt=""> <span>在线付款</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/online-pay">在线付款</a> <a href="/help/163.htm">转账汇款</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow3.png" alt=""> <img class="s_img" src="/images/know3.png" alt=""> <span>相关服务</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/News/170.htm">常见问题</a> <a href="/help/193.htm">备案须知</a> <a href="/help/173.htm">服务条款</a> <a href="/help/248.htm">投诉举报</a> </div> <li class="main_left_selected"> <div class="L_nav_left"> <img class="r_img" src="/images/iknow4.png" alt=""> <img class="s_img" src="/images/know4.png" alt=""> <span>新闻动态</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" style="display: block;"> <a href="/News/171.htm">网站优化</a> <a href="/News/224.htm">建站经验</a> <a href="/News/174.htm">网络营销</a> <a class="on" href="/News/238.htm">网页设计</a> <a href="/News/237.htm">技术文章</a> <a href="/News/281.htm">系统公告</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow5.png" alt=""> <img class="s_img" src="/images/know5.png" alt=""> <span>关于我们</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/aboutus" title="关于我们">关于我们</a> <a href="/about/200.htm" title="人才招聘">人才招聘</a> <a href="/about/202.htm" title="隐私保护">隐私保护</a> <a href="/contact" title="联系我们" target="_blank">联系我们</a> </div> </ul> </div> <script> $('.main_left ul li').click(function (e) { e.preventDefault(); var num_li = $('.main_left ul li').index(this) $('.main_left_drop').eq(num_li).slideToggle() $(this).addClass('main_left_selected').siblings().removeClass('main_left_selected') $('.main_left ul li i').eq(num_li).toggleClass('rroo') }); </script>   <div class="main_right"> <div class="main_right_title"> 网页设计 </div> <div class="main_right_box"> <div class="Ml_temlpate_news"> <div class="Ml_temlpate_news_2"> <div class="newitem2"> <div class="newitem2left"><strong> 21</strong> <p> 2016/09 </p> </div> <div class="newitem2right"> <a href="/News/detail/242.htm"> 网站设计之扁平化图标设计方法简述 </a> <p> 界面趋向于扁平化，那么除了界面还有一些图标扁平化的设计应该怎么设计呢？大同小异，界面设计只是在整体上的设计，而图标设计上，风格一致，只是在设计的过程中更为精致，要在一个图标里面表达内容，也是让设计师头痛的一件事，而扁平化设计比较注重是图标的简洁和表达，而一些基本的设计方法除了能够简约之外，很重要的一点是能够表达清晰，在理性和感性之间的表达出极简主义的精髓和魅力。有些人说扁平化图标就是实物的剪影，小编不否定也不肯定，毕竟它也不是单纯的剪影，而扁平化很重要的是线和面的应用，此外还有颜色的运用。扁平化的图标大致分为纯粹的平面设计，折叠设计，轻质感设计等等，这一类的风格其实比较容易跟一些传统的中国剪纸风格混淆，腾云建站认为这样混淆其实也是会出现的，毕竟很多情况下确实有一点相似。正经的说大家都是平面的，对于扁平化的图标实现，其实还有些流行使用二维或者三维来表达装饰，组合起来的画风也是别有一番风味，但是更多的是要灵活运用颜色，把效果发挥到极致。例如纯色调的图标设计，这种图片比较考究，毕竟是统一色系的进行搭配，容易吧图标搞砸，但是却更具有简单抽象、易于接受等特性，有些设计会偏向于“线”的刻画，精准到位的设计会给人一种清新脱俗的感觉，另一种会比较倾向于“面”的设计，把握大局，给人大气的感觉。这一类的纯色图标设计清新典雅，不少的界面里都能够看到他们的踪迹，而且具有别具一格的现代气息，更为人们所喜爱。设计上关键还是细节设计。从前的实物化设计是追求细节上的相像，而扁平化图标主要是轮廓上的绘制让人感觉简约，当然也不是没有细节，细节主要是体现在轮廓线条的设计。绘制过程可以根据自己的洗好和设计进行融合，每一笔越细致更会凸显精细和典雅，虽然去繁的过程看起来很简单，但实际操作却不然，要取实物其中的精华和亮点，同时能够传达出准确的信息，这也是一个比较困难的过程。在一般的绘制基础上，应该懂得抓住事物的关键点，运用几何秒回出相近的图形，当雏形出来之后，就可以根据自己的创造想法调整线条，定型，对比调整，图形内部要讲究调整比例的结构。在制作的过程中应该注意轮廓、拐点、斜线等等的会不会有发虚的现象，出现这种情况都会给人感觉不大好看，技术不过关的感觉，小编这里有一个小技巧：双层叠加，这种效果往往能够避免一些发虚的感觉。新手一般很容易犯的一个错误就是图标最后会变得模糊，如果发生这种情况，首先要检查是不是因为使用了矢量绘制，这是一个不良习惯，注意避免。 </p> </div> </div> <div class="newitem2"> <div class="newitem2left"><strong> 07</strong> <p> 2016/06 </p> </div> <div class="newitem2right"> <a href="/News/detail/223.htm"> css中li元素在ie6、ie7中出现bug的解决方法 </a> <p> 当li元素不浮动，li里的元素出现浮动时，li的高度在ie6/ei7浏览器中会莫名的会多出3px。这里直接给出具体的解决方法：方法一：给li添加浮动方法二：把li设置成display:inline-block方法三：给li元素设置vertical-align值，此值可为top, bottom, middle, text-top, text-bottom, middle, sub, super中的一项（推荐：在不改变原有样式的基础上添加，不影响其他任何代码） </p> </div> </div> <div class="newitem2"> <div class="newitem2left"><strong> 04</strong> <p> 2016/06 </p> </div> <div class="newitem2right"> <a href="/News/detail/214.htm"> z-index轴在css中具体使用方法 </a> <p> z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。原理性的东西就不说了，网上搜索一大堆，具体讲下z-index属性怎么使用。这个属性比较特别，并不是直接给div加个属性就能起作用的。需要满足2个条件：条件一：作用的这个div的position属性不能是默认值（static默认值，没有定位）；条件二：必须是亲兄弟间的div相互比较z-index轴（需要是同一个父亲）；下面具体说下怎么操作作用的这个div的position属性不能是默认值一般情况下，如果这个div需要定位的，可以选择“absolute”或“fixed”值；如果仅仅是配合z-index使用，使z-index属性起作用，可以选择“relative”值。必须是亲兄弟间的div相互比较z-index轴（需要是同一个父亲）龙生龙，凤生凤，老鼠儿子爱打洞，这个就是类似继承关系。举例：两个小伙之间比较地位高低有两种情况，A：如果他们是同一个父亲的儿子，这个两小伙谁实力强，谁的地位就高。B：如果两小伙的父亲不是同一个人，那么这两小伙的地位就是靠父亲之间的地位高低决定的。总结：如果是同一个父级div里的子div相比较，哪个子div的z-index设置的高，哪个就排在前面；如果是不同父级div里的子div相比较，就是这两个父级div相比较，谁的z-index设置的高，他们的父亲连同儿子地位都高。（这两个子div是不好比较的，他们的高低由父div决定） </p> </div> </div> <div class="newitem2"> <div class="newitem2left"><strong> 02</strong> <p> 2016/06 </p> </div> <div class="newitem2right"> <a href="/News/detail/211.htm"> 网站banner图片制作——拼接 </a> <p> 为客户制作网站，首页上需要用到大幅的banner图片，如果客户提供的图片不好抠图、尺寸不够大，图片多张零碎；但是客户要求放在页面的，那么下面的方法和适合你。要领：图片清晰、图片与图片之间的间隙相同、图片大小保持一致。方法一：竖切方法二：斜切方法三：其他切割形式 </p> </div> </div> </div> </div> </div> </div>  </div> <script type="text/javascript"> getfoot(); </script> </body> </html>

CINXE.COM

网页设计知识 - 腾云网