под сложными блоками понимается, что у блока должно быть закругление углов и допустим внутренний глоу,
понятно что нужно использовать 9 ячеек что бы расставить все в нужном порядке, а может есть еще какой способ что бы сделать это.
вот моя попытка сделать такой блок
<div style="width:100%; position:relative; background:#b5e6f4;"> <div style="background:url(middleleft.gif) repeat-y left;"> <div style="background:url(middleright.gif) repeat-y right;"> <div style="background:url(middletop.gif) repeat-x top;"> <div style="background:url(middlebottom.gif) repeat-x bottom;"> <div style="width:20px; height:20px; background:url(topleft.gif); position:absolute; top:0px; left:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(topright.gif); position:absolute; top:0px; right:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(bottomleft.gif); position:absolute; bottom:0px; left:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(bottomright.gif); position:absolute; bottom:0px; right:0px; z-index:1;"></div> <div style="padding:20px; position:relative; z-index:2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante enim, ut interdum neque. Cras aliquet nisl non nibh ultrices cursus. Aliquam sed lacus et ligula gravida iaculis. Pellentesque interdum urna eu orci venenatis lacinia. Vivamus lacinia vestibulum elit a gravida. Proin in arcu eu mauris pulvinar lobortis. Vestibulum ut nulla eget sapien convallis consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse odio purus, pellentesque vitae posuere nec, porttitor ut lectus. Quisque vestibulum hendrerit tortor eget gravida. Duis id urna sapien, dapibus rhoncus libero. Maecenas sit amet varius lacus. Aenean ullamcorper pretium lectus eget congue. Praesent diam risus, tincidunt non luctus non, adipiscing vitae ante. Integer nec dui eu ligula fringilla facilisis. Aliquam tincidunt, eros sed venenatis consequat, risus lacus faucibus lorem, sit amet ultrices nibh sapien et felis. Curabitur sed est sapien, sed ornare ligula. </div> </div> </div> </div> </div> </div>
можно немного упростить
<div style="width:100%; position:relative; background-color:#b5e6f4;background:url(middleleft.gif) repeat-y left;"> <div style="background:url(middleright.gif) repeat-y right;"> <div style="background:url(middletop.gif) repeat-x top;"> <div style="background:url(middlebottom.gif) repeat-x bottom;"> <div style="width:20px; height:20px; background:url(topleft.gif); position:absolute; top:0px; left:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(topright.gif); position:absolute; top:0px; right:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(bottomleft.gif); position:absolute; bottom:0px; left:0px; z-index:1;"></div> <div style="width:20px; height:20px; background:url(bottomright.gif); position:absolute; bottom:0px; right:0px; z-index:1;"></div> <div style="padding:20px; position:relative; z-index:2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante enim, ut interdum neque. Cras aliquet nisl non nibh ultrices cursus. Aliquam sed lacus et ligula gravida iaculis. Pellentesque interdum urna eu orci venenatis lacinia. Vivamus lacinia vestibulum elit a gravida. Proin in arcu eu mauris pulvinar lobortis. Vestibulum ut nulla eget sapien convallis consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse odio purus, pellentesque vitae posuere nec, porttitor ut lectus. Quisque vestibulum hendrerit tortor eget gravida. Duis id urna sapien, dapibus rhoncus libero. Maecenas sit amet varius lacus. Aenean ullamcorper pretium lectus eget congue. Praesent diam risus, tincidunt non luctus non, adipiscing vitae ante. Integer nec dui eu ligula fringilla facilisis. Aliquam tincidunt, eros sed venenatis consequat, risus lacus faucibus lorem, sit amet ultrices nibh sapien et felis. Curabitur sed est sapien, sed ornare ligula. </div> </div> </div> </div> </div>
интересно способы кто, как делает, как правильно делать и что считается моветоном
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
AlexKon
под сложными блоками понимается, что у блока должно быть закругление углов и допустим внутренний глоу,
понятно что нужно использовать 9 ячеек что бы расставить все в нужном порядке, а может есть еще какой способ что бы сделать это.
вот моя попытка сделать такой блок
можно немного упростить
интересно способы кто, как делает, как правильно делать и что считается моветоном
Link to comment
Share on other sites
8 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.