Home >Web Front-end >HTML Tutorial >Please tell me how to achieve this style without using pictures, thank you! _html/css_WEB-ITnose
Please tell me how to achieve this style without using pictures, thank you! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:361018browse
Please tell me how to implement this style without using pictures and make the width adaptive, thank you!
As shown in the picture:
Reply to the discussion (solution)
To add, the right side is closed. I don’t know how to put the picture up but the right side is missing: (
Use absolute positioning, just position the text above the frame
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#all{ margin:20px auto; width:960px;}#panel{ border:#09F 1px solid; position:relative; width:600px;}#title{ position:absolute; left:20px; top:-15px; background:#FFF; padding:5px 10px;}</style></head><body><div id="all"><div id="panel"><div id="title">基本信息</div><p>内容</p></div></div></body></html> 239f24e0e727f069e728d3ca05470942
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
f860775cd95e67ed8e16c79e5aa8ad2f
b2386ffb911b14667cb8f0f91ea547a7Untitled Document< ;/title>
080b747a20f9163200dd0a7d304ba388
8efb1a69df0124019289bae80c95caa9
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d2b5469ab79cf842344327415c3b3bb9577d2f8947f6b319ed277e63e7bcc2664testa814477f903c8e27bd1ff8e5c6bbe7c1
a3ae74428855f48d0438405a4619fe75
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Thank you, the method of #4 bigc2001 is very simple!