コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > ul+li を使用して細線テーブルを実装する

ul+li を使用して細線テーブルを実装する

墨辰丷
リリース： 2018-05-09 17:31:10
オリジナル
2212 人が閲覧しました

この記事では、テーブルを使用せずに ul+li で実現される細線テーブル効果の使用方法を主に紹介します。非常に創造的で興味のある友人は、それについて学ぶことができます。

コードは次のとおりです:

<!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=gb2312" /> 
<title>write by 阿会楠 环境：IE7+IE6</title> 
<style type="text/css"> 
#ulDate{ 
    width:404px; 
    margin:0; 
    border-top:1px solid #cccccc; 
    border-left:1px solid #cccccc; 
} 
#ulDate li{ 
    float:left; 
    width:100px; 
    height:30px; 
    list-style-type:none; 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    /*非必须*/ 
    line-height:30px; 
    font-size:12px; 
    text-align:center; 
     
} 
</style> 
</head> 

<body> 
<ul id="ulDate"> 
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>
ログイン後にコピー

関連推奨事項:

html細線テーブルの作成方法

CSSのborder-collapse:collapse属性を使用して細線テーブルを作成するサンプルコード

CSS 細線の実装 table_html/css_WEB-ITnose

以上がul+li を使用して細線テーブルを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
シート
ソース：php.cn
前の記事：画像切り替え効果を実現するCSS 次の記事：CSSを使って位置を固定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
`:after` 疑似要素をスタイル付きコンポーネントに正しく適用するための React.js ガイド この美しい下線アニメーションを見つけました。 <ul><li><ahref="#">概要</a></li&...
から 2024-04-04 22:28:08
0
1
1322
ルート ノードのリスト項目シンボル (<ul> および <ol>) は CSS で表示および削除できず、overflow-x: hidden の問題は解決できません。 現在、Web ページの作成に取り組んでいますが、リスト項目に問題があります。通常、各リスト項目の横に表示されるドットと数字は表示されません。また、CSS プロパティの overfl...
から 2024-04-04 16:38:22
0
1
3617
特定の単語を含むコンテンツを保持し、他のすべてを置き換える JavaScript 正規表現 これは簡単だと思いますが、次の状況で苦労しています: 文字列 (HTML がテキストとして渡される): テキスト<br>テキスト<br><ul>...
から 2024-04-01 11:06:23
0
2
358
Vue：ドロップダウンメニューの遷移と別要素のクラスを切り替える方法 私はこれを取得しました（非常に単純です）： <divclass="dropdownMenuWrapper"><ulclass="dr...
から 2024-03-31 21:34:34
0
1
370
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート