CSS と HTML マークアップが次のような縦型のニュース フィード デザインでどのように見えるかを説明できる人はいますか?
アイコンと右側のテキスト付きの行が本当に気に入っています。CSS にはコンテンツ属性があり、シンボルを追加して垂直線に境界線を使用できることは知っていますが、CSS でシンボルを宣言する代わりに画像/ブートストラップ アイコンを使用する方法を知りたいと思っていました。
ヒントやチュートリアルをいただければ幸いです。
これは本当に恐ろしいCSSであり、おそらく私は撃たれるべきですが、漠然とあなたが投稿したようなものであるようです. あれは; これがあなたが話していたことだと仮定します。とにかく、ゼイン・デイビッドか誰かによる小さなテキストについて話していると仮定すると、横にアイコンがあり、アイコンを通る線があり、変更された箇条書きと時間はそれらを通り抜けます。の
は間違いなく理想的なオプションではありませんが、カスタムの箇条書きを使用した li の ul が正しい方法だと思います。葉っぱで失礼します。私の恐ろしいポジショニングなどを完全に無視しても、順序付けられていないリストがおそらく最善の方法であることがわかるはずです。
編集: .news-feed .well:after のコードを次のように切り替えます。
.news-feed .well:after { content:""; position: absolute; top: 60%; left: 5px; border-top: 20px solid #A5A5A5; border-top-color: inherit; border-left: 20px solid transparent; border-right: 20px solid transparent; -webkit-transform: rotate(90deg);
}
あなたがここで尋ねたことは、物事を説明するのに数ページしか必要としません。
私が提案できるのは、次の Youtube チュートリアルを実行して、css で画像を処理する方法を学ぶことです。
これらのビデオを見て練習すると、質問でアップロードした画像の要素よりもはるかに優れたデザインができるようになります。
必要に応じて、おそらく同様のビデオを見る必要があります:)